Creating the Newsletter Form Section
Learn how to add a newsletter form to a blog.
We'll cover the following...
We'll cover the following...
In this lesson, we’ll explore how to create the newsletter form, which is the next item in our design that will remind users to subscribe. The following image shows what it will look like.
The blog template’s newsletter subscription form
Creating the newsletter
To create it, we put some code after the closing </div> tag after the closing </aside> tag. 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
font-bold uppercase tracking-wider text-white bg-green-600
hover:bg-green-500">Subscribe</button>
</form>
</div>
</section>
</body>
</html>Newsletter of blog template
Note: You can find the output by clicking the URL and the output tab.
Lines 156–170: We’ve again used flex classes to order the ...