Building a Blog Starter Template
Learn how to build a blog starter template.
We'll cover the following
In this lesson, we’ll explore how to build a simple blog starter template from scratch. We won’t go too deeply into the details of each individual utility class, but enough explanation will be provided.
Note: As we dive into building our starter template with Tailwind, it’s important to note that Tailwind applies an opinionated set of base styles for every project by default.
Sample application
Here’s the final version of the blog template. Click the “Run” button to see our app.
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<header class="flex justify-between items-center sticky top-0 z-10 py-4 bg-blue-900">
<div class="flex-shrink-0 ml-6 cursor-pointer">
<i class="fas fa-wind fa-2x text-yellow-500"></i>
<span class="text-3xl font-semibold text-blue-200">Tailwind School</span>
</div>
<ul class="flex mr-10 font-semibold">
<li class="mr-6 p-1 border-b-2 border-yellow-500">
<a class="cursor-default text-blue-200" href="#">Home</a>
</li>
<li class="mr-6 p-1">
<a class="text-white hover:text-blue-300" href="#">News</a>
</li>
<li class="mr-6 p-1">
<a class="text-white hover:text-blue-300" href="#">Tutorials</a>
</li>
<li class="mr-6 p-1">
<a class="text-white hover:text-blue-300" href="#">Videos</a>
</li>
</ul>
</header>
<div class="flex pb-4 bg-blue-100">
<main class="flex flex-col w-2/3 pl-6 pr-4 pt-4 ">
<article class="my-4 shadow">
<a href="#">
<img class="hover:opacity-75" src="./laptop.jpeg">
</a>
<div class="flex flex-col p-6 pt-2 bg-white">
<a href="#" class="my-2 text-sm font-bold uppercase
border-b-2 border-yellow-500 text-blue-600">Layout</a>
<a href="#" class="pb-4 text-3xl
font-serif font-bold hover:text-gray-700 ">
Lorem Ipsum Dolor Sit Amet Dolor Sit Amet</a>
<p class="pb-3 text-sm">By <a href="#"
class="font-semibold hover:text-gray-800">David Jacobs</a>, May 25, 2021</p>
<p class="pb-6">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus quis porta dui.
Ut eu iaculis massa. Sed ornare ligula lacus,
quis iaculis dui porta volutpat.
In sit amet posuere magna..</p>
<a href="#" class="uppercase text-xs text-blue-600
hover:text-yellow-500">Continue Reading <i
class="fas fa-arrow-right"></i></a>
</div>
</article>
<article class="my-4 shadow">
<a href="#">
<img class="hover:opacity-75" src="./book.jpeg">
</a>
<div class="flex flex-col p-6 pt-2 bg-white">
<a href="#" class="my-2 text-sm font-bold
uppercase border-b-2 border-yellow-500
text-blue-600">Imagery</a>
<a href="#" class="pb-4 text-3xl font-serif font-bold
hover:text-gray-700 ">Lorem Ipsum Dolor Sit Amet Dolor
Sit Amet</a>
<p class="pb-3 text-sm">By <a href="#"
class="font-semibold hover:text-gray-800">
Monica Sanchez</a>, May 10, 2021</p>
<p class="pb-6">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus quis porta dui.
Ut eu iaculis massa. Sed ornare ligula lacus,
quis iaculis dui porta volutpat. In sit amet posuere magna..</p>
<a href="#" class="uppercase text-xs text-blue-600
hover:text-yellow-500">Continue Reading <i
class="fas fa-arrow-right"></i></a>
</div>
</article>
<article class="my-4 shadow">
<a href="#">
<img class="hover:opacity-75" src="./code.jpeg">
</a>
<div class="flex flex-col p-6 pt-2 bg-white">
<a href="#" class="my-2 text-sm font-bold uppercase
border-b-2 border-yellow-500 text-blue-600">Typography</a>
<a href="#" class="pb-4 text-3xl font-serif font-bold
hover:text-gray-700 ">Lorem Ipsum Dolor Sit Amet
Dolor Sit Amet</a>
<p class="pb-3 text-sm">By <a href="#"
class="font-semibold hover:text-gray-800">David Jacobs</a>, April 20, 2021</p>
<p class="pb-6">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus quis porta dui.
Ut eu iaculis massa. Sed ornare ligula lacus,
quis iaculis dui porta volutpat.
In sit amet posuere magna..</p>
<a href="#" class="uppercase text-xs
text-blue-600 hover:text-yellow-500">Continue Reading
<i class="fas fa-arrow-right"></i></a>
</div>
</article>
</main>
<aside class="w-1/3 pl-4 pr-6 pt-8">
<section>
<form class="flex">
<input type="text" class="w-full px-3 py-2
rounded-l-lg focus:outline-none text-gray-800"
placeholder="Search...">
<button class="px-2 rounded-r-lg focus:outline-none
text-center text-xl text-gray-400 hover:text-gray-900
bg-white"><i class="fas fa-search"></i></button>
</form>
</section>
<section class="mt-8 text-white">
<div class="p-4 rounded-lg shadow-xl text-center
bg-gradient-to-b from-red-400 to-red-200">
<h3 class="font-semibold text-lg">Get the latest news
& tutorials right to your inbox</h3>
<form>
<input type="email" placeholder="youremail@example.com"
class="w-full mt-3 p-3 rounded-lg shadow border
border-gray-400 focus:outline-none text-gray-800">
<button type="submit" class="w-full mt-4 p-4 rounded-lg
focus:outline-none shadow font-semibold uppercase
tracking-wider bg-green-600 hover:bg-green-500">Subscribe</button>
</form>
</div>
</section>
<section class="mt-8">
<h3 class="mb-4 pb-2 text-2xl font-semibold border-b-2
border-yellow-500 text-blue-600 ">Categories</h3>
<ul>
<li class="mb-1">
<a class="text-blue-900 hover:text-blue-500" href="#">Layout (23)</a>
</li>
<li class="mb-1">
<a class="text-blue-900 hover:text-blue-500" href="#">Typography (44)</a>
</li>
<li class="mb-1">
<a class="text-blue-900 hover:text-blue-500" href="#">Colors (16)</a>
</li>
<li class="mb-1">
<a class="text-blue-900 hover:text-blue-500" href="#">Imagery (19)</a>
</li>
</ul>
</section>
</aside>
</div>
<section class="flex flex-col items-center p-4 bg-red-400">
<div class="text-center text-white">
<h2 class="font-bold text-3xl">Want to stay up-to-date?</h2>
<h3 class="text-xl">Join our mail list for hot news
& new tutorials</h3>
</div>
<div>
<form class="my-4 flex">
<input class="p-4 rounded-l-lg focus:outline-none
text-gray-800" placeholder="your@mail.com"/>
<button class="p-4 rounded-r-lg focus:outline-none
font-bold uppercase tracking-wider text-white bg-green-600
hover:bg-green-500">Subscribe</button>
</form>
</div>
</section>
<footer class="bg-blue-900">
<div class="flex flex-wrap text-white">
<div class="w-1/3 p-5 border-r border-blue-800">
<div class="my-6 text-xl font-semibold">ABOUT US</div>
<p class="text-gray-400">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Aenean ac est massa.
Donec eget elementum sapien, tincidunt tempor nunc.
Cras sodales id ipsum at convallis.</p>
</div>
<div class="w-1/3 p-5 text-center border-r border-blue-800">
<div class="my-6 text-xl font-semibold">CONTACT US</div>
<p class="text-gray-400">
A108 Adam Street <br>
New York, NY 535022 <br>
United States <br>
<strong>Phone:</strong> +1 5589 55488 55 <br>
<strong>Email:</strong> info@webcraft.com
</p>
<div class="flex justify-center space-x-4 mt-6">
<button class="w-10 h-10 p-1 rounded bg-blue-500">
<i class="fab fa-facebook fa-2x"></i>
</button>
<button class="w-10 h-10 p-1 rounded bg-blue-400">
<i class="fab fa-twitter fa-2x"></i>
</button>
<button class="w-10 h-10 p-1 rounded bg-gray-700">
<i class="fab fa-github fa-2x"></i>
</button>
</div>
</div>
<div class="w-1/3 p-5">
<div class="my-6 text-xl font-semibold">SAY HELLO!</div>
<form>
<input class="w-full h-10 mb-4 p-2 focus:outline-none
border-b-2 border-blue-800 bg-blue-900"
type="email" placeholder="Your email">
<textarea class="w-full h-24 mb-6 px-2 pt-2
focus:outline-none border-b-2 border-blue-800 bg-blue-900"
placeholder="Your message"></textarea>
<button class="w-full px-4 py-2 rounded-lg focus:outline-none
font-semibold tracking-wider bg-yellow-600
hover:bg-yellow-500" type="button">SEND</button>
</form>
</div>
</div>
</footer>
</div>
</body>
</html>Note: You can find the output by clicking the URL and the output tab.
Creating the header
We’ll build the template from top to bottom, starting with a header. The following image shows what we’re trying to create.
To create the header, put the following code inside the <body> element in the starting template:
<div class="container mx-auto"><header class="flex justify-between items-center sticky top-0 z-10 py-4 bg-blue-900"><div class="flex-shrink-0 ml-6 cursor-pointer"><i class="fas fa-wind fa-2x text-yellow-500"></i><span class="text-3xl font-semibold text-blue-200">Tailwind School</span></div><ul class="flex mr-10 font-semibold"><li class="mr-6 p-1 border-b-2 border-yellow-500"><a class="cursor-default text-blue-200" href="#">Home</a></li><li class="mr-6 p-1"><a class="text-white hover:text-blue-300" href="#">News</a></li><li class="mr-6 p-1"><a class="text-white hover:text-blue-300" href="#">Tutorials</a></li><li class="mr-6 p-1"><a class="text-white hover:text-blue-300" href="#">Videos</a></li></ul></header></div>
Let’s break the header’s code into smaller blocks. First, we’ve wrapped all the content in a container class in the wrapping <div> element.
<div class="container mx-auto"></div>
This forces the design to accommodate certain dimensions depending on the current breakpoint. We’ve also centered the design with the mx-auto utility. This sets the left and right margins to auto.
In Tailwind, when x is used after a CSS setting abbreviation (m for margin here), it means that the setting will be applied both on the left and the right. If y is used instead, it means that the setting will be applied both on top and bottom.
The reason we create such a container is that, on large screens, the design will be centered and presented in a more compact size, which looks much better than a fully fluid viewport.
The next thing we’ve done is create the header with a <header> element.
<header class="flex justify-between items-center sticky top-0 z-10 py-4 bg-blue-900"> </header>
We’ve created a flex container and used the justify-between and items-center classes to add an equal amount of space between flex items and align them along the center of the container’s cross axis.
We’ve also used the sticky and top-0 classes to make the header fixed to the top when users scroll down, and we’ve set a z-10 class to ensure the header will always be on top.
We’ve added a shade of blue color as a background and some padding for both the top and bottom sides of the header.
The first item in the header’s container is the blog’s logo:
<div class="flex-shrink-0 ml-6 cursor-pointer"><i class="fas fa-wind fa-2x text-yellow-500"></i><span class="text-3xl font-semibold text-blue-200">Tailwind School</span></div>
It’s combination of a yellow colored wind icon (fas fa-wind) and light blue colored “Tailwind School” text. We’ve made the icon bigger by using Font Awesome’s fa-2x class. The text is made bigger and semibold by using Tailwind’s text-3xl and font-semibold classes respectively.
For the logo’s container, we’ve added a bit of left margin and used the flex-shrink-0 class to prevent the logo from shrinking when the design is resized to smaller viewports.
The second item in the header’s container is the main navigation.
<ul class="flex overflow-x-hidden mr-10 font-semibold"> </ul>
We’ve created it by using a ul element turned into a flex container so we can style its items as horizontal links. We’ve used the overflow-x-hidden class to clip the content within navigation that overflows its left and right bounds. We’ve also added some right margins.
The mr-10 class and the ml-6 (logo) classes use r for right and l for left abbreviations to set the right and left margins respectively. In a similar way, t and b can be used for setting the top and bottom sides of an element.
For the navigation’s links, we’ve added some right margin and a small padding to all sides.
<li class="mr-6 p-1 border-b-2 border-yellow-500"><a class="cursor-default text-blue-200" href="#">Home</a></li><li class="mr-6 p-1"><a class="text-white hover:text-blue-300" href="#">News</a></li><li class="mr-6 p-1"><a class="text-white hover:text-blue-300" href="#">Tutorials</a></li><li class="mr-6 p-1"><a class="text-white hover:text-blue-300" href="#">Videos</a></li>
When we use a setting like padding without side abbreviation (p-1 here), it’s applied to all sides.
We’ve set the color of links to white, which changes to light blue upon hovering. We’ve also used the hover: prefix to achieve that effect.
We’ve styled the active “Home” link by adding a thin yellow border below the text. The border is created with the border-b-2 class, where b represents bottom and 2 is the amount of border thickness.
Click the “Run” button to see our app.
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<header class="flex justify-between items-center sticky
top-0 z-10 py-4 bg-blue-900">
<div class="flex-shrink-0 ml-6 cursor-pointer">
<i class="fas fa-wind fa-2x text-yellow-500"></i>
<span class="text-3xl font-semibold text-blue-200">Tailwind School</span>
</div>
<ul class="flex mr-10 font-semibold">
<li class="mr-6 p-1 border-b-2 border-yellow-500">
<a class="cursor-default text-blue-200" href="#">Home</a>
</li>
<li class="mr-6 p-1">
<a class="text-white hover:text-blue-300" href="#">News</a>
</li>
<li class="mr-6 p-1">
<a class="text-white hover:text-blue-300" href="#">Tutorials</a>
</li>
<li class="mr-6 p-1">
<a class="text-white hover:text-blue-300" href="#">Videos</a>
</li>
</ul>
</header>
</div>
</body>
</html>Note: You can find the output by clicking the URL and the output tab.