React and TailwindCSS are my go-to tools for anything I have to build these days. React brings reusability to the table with the components it allows us to build and Tailwind with all its utilities makes the process of building the UI super quick and easy. I wanted to showcase the power of these tools when used together and I thought recreating the dev.to homepage for my first post on the platform would be a good idea.
For Part 1, we'll be recreating the Navbar. I thought it'd be good to start with something small and also make this post a sort of an introduction to Tailwind. Alright then, let's jump right in!
import React from "react";
export default function Navbar() {
return (
<nav className="bg-orange-100 h-12 border-b border-gray-400">
<div className="container flex mx-auto h-full">
<div className="flex w-full items-center mx-2">
<div className="flex">
<svg
className="h-8 text-white fill-current bg-black p-2 rounded"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 132.000000 65.000000"
>
<path d="M0 33v32h11.3c12.5 0 17.7-1.6 21.5-6.5 3.8-4.8 4.4-9 4-28-.3-16.8-.5-18.2-2.7-21.8C30.3 2.5 26.1 1 12 1H0v32zm23.1-19.1c2.3 1.9 2.4 2.3 2.4 18.5 0 15.7-.1 16.7-2.2 18.8-1.7 1.6-3.5 2.2-7 2.2l-4.8.1-.3-20.8L11 12h4.9c3.3 0 5.6.6 7.2 1.9zM46.1 3.6c-2 2.6-2.1 3.9-2.1 29.6v26.9l2.5 2.4c2.3 2.4 2.9 2.5 16 2.5H76V54.1l-10.2-.3-10.3-.3v-15l6.3-.3 6.2-.3V27H55V12h21V1H62.1c-13.9 0-14 0-16 2.6zM87 15.2c2.1 7.9 5.5 20.8 7.6 28.8 3.2 12.3 4.3 15 7 17.7 1.9 2 4.2 3.3 5.7 3.3 3.1 0 7.1-3.1 8.5-6.7 1-2.6 15.2-55.6 15.2-56.8 0-.3-2.8-.5-6.2-.3l-6.3.3-5.6 21.5c-3.5 13.6-5.8 20.8-6.2 19.5C105.9 40 96 1.9 96 1.4c0-.2-2.9-.4-6.4-.4h-6.4L87 15.2z" />
</svg>
</div>
<div className="flex-1 text-center">
<form action="/submit">
<input
type="text"
placeholder="search"
className="bg-gray-300 px-3 py-2 rounded w-4/5 lg:w-1/2 h-8"
/>
</form>
</div>
<div className="flex items-center">
<a
href="/new"
className="bg-teal-400 uppercase border-2 border-black py-1 px-5 font-bold mr-4 text-xs rounded hidden md:block"
>
write a post
</a>
<a href="/connect" className="h-10 w-8 mr-3">
<svg
className="h-full w-full"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 60.064 60.064"
>
<path d="M59.84,7.897c-0.218-0.268-0.556-0.393-0.893-0.353c-0.077,0.004-0.149,0.017-0.224,0.039L0.738,23.354 C0.312,23.47,0.012,23.852,0,24.293c-0.011,0.441,0.269,0.838,0.688,0.976l21.217,6.952l-1.898,15.182 c-0.05,0.4,0.145,0.791,0.494,0.991c0.155,0.089,0.327,0.133,0.498,0.133c0.215,0,0.43-0.069,0.608-0.206l7.765-5.946l6.807,9.725 c0.188,0.269,0.494,0.427,0.819,0.427c0.022,0,0.045-0.001,0.068-0.002c0.35-0.024,0.661-0.229,0.821-0.542l22.063-43 C60.134,8.631,60.09,8.205,59.84,7.897z M52.895,11.241L22.861,30.429L4.484,24.408L52.895,11.241z M22.288,45.281l1.382-11.053 l4.555,6.507L22.288,45.281z M36.868,49.594L24.418,31.808l32.1-20.508L36.868,49.594z" />
</svg>
</a>
<a href="/notifications" className="h-10 w-6 mr-3">
<svg
className="h-full w-full"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 47.834 47.834"
>
<path d="M46.878 41.834H.956L.96 40.83c.022-4.066 2.87-7.55 6.76-8.438V20.697c0-8.93 7.265-16.197 16.196-16.197 8.932 0 16.198 7.266 16.198 16.197v11.695c3.89.89 6.737 4.372 6.76 8.437l.004 1zm-43.836-2h41.75c-.458-2.908-2.804-5.24-5.8-5.61l-.878-.107v-13.42c0-7.828-6.37-14.197-14.198-14.197S9.72 12.87 9.72 20.697v13.42l-.878.106c-2.997.37-5.342 2.702-5.8 5.61z" />
<path d="M21.125 5.988h-2V4.792C19.125 2.15 21.275 0 23.917 0s4.79 2.15 4.79 4.792v1.176h-2V4.792c0-1.54-1.25-2.792-2.79-2.792s-2.792 1.253-2.792 2.792v1.196zm2.778 41.846c-3.94 0-7.375-2.8-8.164-6.656l1.954-.4c.6 2.93 3.21 5.057 6.205 5.057 3.06 0 5.677-2.18 6.23-5.18l1.966.36c-.725 3.952-4.17 6.82-8.195 6.82zM8.72 32.23h3.682v2H8.72zm9.447 0h20.947v2H18.167z" />
</svg>
</a>
<div>
<img
className="h-8 w-8 rounded-full"
src="https://res.cloudinary.com/practicaldev/image/fetch/s--0eFm7wbK--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/165596/93b7e02d-ac3b-4961-96e2-12dbe20ce77d.jpeg"
alt="nav-profile"
/>
</div>
</div>
</div>
</div>
</nav>
);
}
If you haven't worked with Tailwind or utility based CSS libraries before, this is probably you right now.
The homepage on the Tailwind website describes the library as a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs and that is exactly what it is. The whole library is a bunch of small utility classes that you can put together to quickly build out your UI without writing a single line of CSS. Let's take a quick look at some of the utilities we have used in order to replicate the dev.to navbar.
- We've used the flexbox utilities to control the overall layout.
flexsets the display type toflexanditems-centeris short foralign-items: center. - We've used a bunch of height and width utilities to set those properties on various elements.
- Similarly, we've used the margin and padding utilities to space out our elements.
- We've also used several other utilities to set properties from the font size and weight of our text to setting the background color of our containers to setting a border on only one side of the element. Again, without writing a single line of CSS! You can read about all of them here.
And this is where it got us:
I'd say that's pretty close for something that was put together in 15-ish minutes! In the next post, we'll leverage the power of React to build components and quickly put together the rest of the homepage.
P.S - This is the first time I've done such a post so I am open to suggestions of any kind. Should I be focusing more on some things and lesser on some other things? Was there something about the post you liked or was there something else you wish it had? Please, please let me know so that the next one(s) can be better. Thanks!
Top comments (0)