Recreate the Tweet Creation Modal with Tailwind CSS

Tailwind CSS is an awesome tool that changes the way we write our HTML and CSS. Tailwind is a "utility-first CSS framework" that I initially wasn't sure about. Our HTML gets pretty busy when using Tailwind, but I've found it's not that bad of a tradeoff.

The more I have used Tailwind, the more I have liked it. It lets me design my UI quicker than ever before. People say that CSS frameworks will make you not know the underlying CSS. With Tailwind, I believe you need to know your CSS even better to be able to use the utility classes.

Let's recreate something with Tailwind so that we can practice.

I've found some things around the web to rebuild with Tailwind. For this article, we'll build Twitter's tweet creation modal. Let's get started!

We'll do all of our work inside of CodePen . It's a great place to experiment with HTML/CSS/JavaScript projects.

Fork this CodePen to start: https://codepen.io/chrisoncode/pen/mdyoGar

The Final CodePen

If you want to see what our final project will look like, here you go:

We want our modal to sit in the middle of our screen. For this, we'll need a container that is set to the full height of our browser screen. Then we'll use CSS flexbox to vertically and horizontally center.

Write the following in your HTML section of CodePen.

<div>

</div>

Let's set a background to match Twitter's dark mode background. With Tailwind, we try to write as little custom CSS as possible. This is one of the times that we will write custom CSS because Tailwind doesn't have this color that we want in its pre-built classes. Here's the rundown:

h-screen
flex
items-center
justify-center

In the CSS section of our CodePen, add the following:

body {
  background: #15202b;
}

Now that we have the foundation, everything we put inside of that main div will be centered in our browser.

<!-- tweet creation modal -->
<div>

  <!-- header -->

  <!-- body -->

  <!-- footer -->

</div>

We have given it rounded borders, a box shadow, and a background of blue. Tailwind provides colors from 100 to 900 with 900 being the darkest.

I've also given a custom class ( modal ) so that we can add one custom style here. Again, we usually want to avoid using custom styles. In this case, we want to set a min-width , but Tailwind only allows for widths of 0 or 100%.

Add this to our CSS:

.modal {
  min-width: 60%;
}

That will be all the custom CSS that we need! All the rest of the work will be Tailwind classes.

Create the Modal Header

Let's move forward to make the modal header. It's just a section that has an "X" to close the modal. We need a border and text colors for our header.

<!-- header -->
<div>
  <div>X</div>
</div>

Create the Modal Body

Next up is the modal body. This will require an <image> and a <textarea> . We want the image on the left; there a few ways to accomplish this:

• Make the image and textarea positioned next to each other with flexbox
• Make the image positioned absolutely

We'll go for the positioned absolutely option. This may be easier to align with the footer since it looks like the spacing is the same from the body to the footer in Twitter's modal.

Let's start our body section:

<!-- body -->
<div>

</div>

We've added a padding to the left of the body. This is where we'll position our image. We've also added padding to the top for some spacing. Lastly, we have added the relative class so that we can position a child image absolutely.

Adding a Profile Image

Let's add the image now:

<!-- body -->
<div>
  <img src="http://placekitten.com/g/50/50">
</div>

Here are the classes we've used:

absolute
top-0
left-0
mt-4
ml-4

Feel free to add in your own image also. If your image is larger, you may need to constrain its size with one of the width classes .

Adding a Textarea

We'll add the textarea and some styles:

<!-- body -->
<div>
  <img src="http://placekitten.com/g/50/50">
  <textarea placeholder="What's happening?" rows="5"></textarea>
</div>

Here's what we've done so far:

bg-transparent
w-full
pt-4
outline-none
text-lg
text-white

Last step is to create the footer! Notice that there is a left and ride side to our footer. We need to use flexbox to space them appropriately.

<!-- footer -->
<div>
  <div>
        left side
  </div>
  <div>
        right side
  </div>
</div>

We now have a left and right side! The important thing to note here is justify-between . It's flexbox's way of pushing things to the sides of a container.

Let's fill in the icons on the left side. We don't have an icon font installed, so we'll just use emojis! Update the left side to be:

<!-- footer -->
<div>
  <div>
    <a></a>
    <a>拾</a>
    <a></a>
    <a>珞</a>
  </div>
  <div>
    right side
  </div>
</div>

Now update the right side to be:

<!-- footer -->
<div>
  <div>
    <a></a>
    <a>拾</a>
    <a></a>
    <a>珞</a>
  </div>
  <div>
    <button>Tweet</button>
  </div>
</div>

With that, we have our modal!

All in all, this was a fun exercise to put Tailwind into action. Check out the CodePen to see the final code: