Build it with Tim - Generate Tweets and automate your Twitter account using Open AI (Ep. 28)

In this episode, we’ll learn how to build an app to generate Tweets and automate your Twitter account using Open AI.

HTML Tweet Template

<link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

{{#each records}}
  <div class="tweet-wrap">
      
      <div class="tweet-status">
          <p class="{{field_43}}">{{field_43}}</p>
      </div>
      
    <div class="tweet-header">
      <img src="https://8232-application-data-2273.s3.amazonaws.com/awrRMZBj5k/1670511619-TGVFXJ6LA-U01JNP88NE4-73916082c5ab-512.png" alt="" class="avator">
      <div class="tweet-header-info">
        Tim Young <span>@TimYoun66083487</span><span> • {{formatDate field_41 '%b %e'}}
        </span>
        <p>{{field_40}}</p>

      </div>

    </div>
    <div class="tweet-img-wrap">
      <img src="{{field_46}}" alt="" class="tweet-img">
    </div>
    <div class="tweet-info-counts">

      <div class="comments">

        <svg class="feather feather-message-circle sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="20"
          height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
          stroke-linejoin="round" aria-hidden="true">
          <path
            d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
          </path>
        </svg>
        <div class="comment-count">33</div>
      </div>

      <div class="retweets">
        <svg class="feather feather-repeat sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
          viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
          stroke-linejoin="round" aria-hidden="true">
          <polyline points="17 1 21 5 17 9"></polyline>
          <path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
          <polyline points="7 23 3 19 7 15"></polyline>
          <path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
        </svg>
        <div class="retweet-count">397</div>
      </div>

      <div class="likes">
        <svg class="feather feather-heart sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
          viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
          stroke-linejoin="round" aria-hidden="true">
          <path
            d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
          </path>
        </svg>
        <div class="likes-count">
          2.6k
        </div>
      </div>

      <div class="message">
        <svg class="feather feather-send sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
          viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
          stroke-linejoin="round" aria-hidden="true">
          <line x1="22" y1="2" x2="11" y2="13"></line>
          <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
        </svg>
      </div>
    </div>
    <div class="tweet-buttons">
      <div class="button-group">
        <div>{{tb_link this tb-id="1" tb-value="Edit/Publish Tweet" tb-open-popup="1" class="btn btn-primary"}}</div>
        <div>{{tb_link this tb-id="2" class="btn btn-danger"}}</div>
      </div>
    </div>
  </div>
{{/each}}

CSS Tweet Template

.tweet-status {
    text-align: right;
    position: relative;
    top: -35px;
    right: -45px;
}

.tweet-status .Unsent {
    background-color: #CD574C;
    display: inline;
    padding: 3px 12px;
    border-radius: 5px;
    color: #fff;
}

.tweet-status .Sent {
    background-color: #5E8D6E;
    display: inline;
    padding: 3px 12px;
    border-radius: 5px;
    color: #fff; 
}

.tweet-buttons {
    margin-left: 60px;
}
.button-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 15px;
}

.button-group div {
    margin-right: 25px;
}

.button-group .btn {
    text-align: center;
}

img {
  max-width:100%;
}

.avator {
  border-radius:100px;
  width:48px;
  margin-right: 15px;
}


.tweet-wrap {
  max-width:490px;
  background: #fff;
  margin: 0 auto;
  margin-top: 35px;
  border-radius:3px;
  padding: 30px;
  border-bottom: 1px solid #e6ecf0;
  border-top: 1px solid #e6ecf0;
}

.tweet-header {
  display: flex;
  align-items:flex-start;
  font-size:14px;
}
.tweet-header-info {
  font-weight:bold;
}
.tweet-header-info span {
  color:#657786;
  font-weight:normal;
  margin-left: 5px;
}
.tweet-header-info p {
  font-weight:normal;
  margin-top: 5px;
  
}
.tweet-img-wrap {
  padding-left: 60px;
}

.tweet-img-wrap img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
}

.tweet-info-counts {
  display: flex;
  margin-left: 60px;
  margin-top: 10px;
}
.tweet-info-counts div {
  display: flex;
  margin-right: 20px;
}
.tweet-info-counts div svg {
  color:#657786;
  margin-right: 10px;
}
@media screen and (max-width:430px){
  .tweet-header {
    flex-direction:column;
  }
  .tweet-header img {
    margin-bottom: 20px;
  }
  .tweet-header-info p {
    margin-bottom: 30px;
  }
  .tweet-img-wrap {
    padding-left: 0;
  }
  .tweet-info-counts {
  display: flex;
  margin-left: 0;
}
.tweet-info-counts div {
  margin-right: 10px;
}
}