- Published on
6 Tips To Make A Follow Me With Tailwind CSS
- What is Tailwind CSS?
- The description of Follow Me ui component
- Why use Tailwind CSS to create a Follow Me ui component?
- The preview of Follow Me ui component
- The source code of Follow Me ui component
- How to create a Follow Me with Tailwind CSS?
- 1. Use a button or a link
- 2. Add a label
- 3. Use the hover effect
- 4. Make it responsive
- 5. Add icons
- 6. Use a grid system
- Conclusion
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that helps you to create custom designs without writing any CSS code. It provides a set of pre-defined CSS classes that you can use to style your HTML elements. Tailwind CSS is easy to use, customizable, and it helps you to create responsive designs quickly.
The description of Follow Me ui component
A Follow Me ui component is a design element that is commonly used on social media platforms. It is a button or a link that allows users to follow a particular user or page on a social media platform. The Follow Me ui component is an essential part of social media marketing, and it helps to increase the number of followers on social media platforms.
Why use Tailwind CSS to create a Follow Me ui component?
Tailwind CSS provides a set of pre-defined CSS classes that you can use to create a Follow Me ui component quickly. With Tailwind CSS, you don't have to write any custom CSS code, which saves you a lot of time and effort. Tailwind CSS also provides responsive design classes that help you to create a Follow Me ui component that looks great on any device.
The preview of Follow Me ui component
To create a Follow Me ui component with Tailwind CSS, you can use a button or a link. The button or link should have a label that says "Follow Me" or something similar. You can style the button or link with Tailwind CSS classes to make it stand out on your website.
Free download of the Follow Me's source code
The source code of Follow Me ui component
To create a Follow Me ui component with Tailwind CSS, you can use the following HTML and CSS code:
<div class="flex flex-col w-full flex-wrap">
<div class="flex items-center justify-between bg-gray-200 p-4">
<span class="text-lg text-tial-800 font-semibold ">Add to your feed</span>
<svg class="" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<div class="flex flex-wrap flex-col md:flex-row">
<div class="flex flex-wrap bg-white border-b border-blue-tial-100 md:w-1/2 lg:w-1/3">
<div class="flex w-full m-4">
<div class="flex items-center">
<img class="h-20 w-24"
src="https://images.unsplash.com/photo-1453847350175-b971869973d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80" />
<div class="flex flex-col p-4">
<h3 class="font-bold text-md text-tial-400">Company Name</h3>
<span class="font-light text-sm">224k followers</span>
<div class="flex">
<svg class="mr-1" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor"
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
class="css-i6dzq1">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg class="mr-1" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor"
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
class="css-i6dzq1">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg class="mr-1" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor"
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
class="css-i6dzq1">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
</div>
</div>
<div class="flex flex-1 flex-grow w-full items-center justify-end">
<div class="flex items-center mr-2">
<a href="#" class="text-lg uppercase font-semibold text-blue-400 hover:text-blue-600">Follow</a>
<svg class="fill-current text-blue-400 font-semibold " viewBox="0 0 24 24" width="16"
height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"
stroke-linejoin="round" class="css-i6dzq1">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap bg-white border-b border-blue-tial-100 md:w-1/2 lg:w-1/3">
<div class="flex w-full m-4">
<div class="flex items-center">
<img class="h-20 w-24"
src="https://images.unsplash.com/photo-1453847350175-b971869973d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80" />
<div class="flex flex-col p-4">
<h3 class="font-bold text-md text-tial-400">Company Name</h3>
<span class="font-light text-sm">224k followers</span>
<div class="flex">
<svg class="mr-1" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor"
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
class="css-i6dzq1">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg class="mr-1" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor"
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
class="css-i6dzq1">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg class="mr-1" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor"
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
class="css-i6dzq1">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
</div>
</div>
<div class="flex flex-1 flex-grow w-full items-center justify-end">
<div class="flex items-center mr-2">
<a href="#" class="text-lg uppercase font-semibold text-blue-400 hover:text-blue-600">Follow</a>
<svg class="fill-current text-blue-400 font-semibold " viewBox="0 0 24 24" width="16"
height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"
stroke-linejoin="round" class="css-i6dzq1">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap bg-white border-b border-blue-tial-100 md:w-1/2 lg:w-1/3">
<div class="flex w-full m-4">
<div class="flex items-center">
<img class="h-20 w-24"
src="https://images.unsplash.com/photo-1453847350175-b971869973d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80" />
<div class="flex flex-col p-4">
<h3 class="font-bold text-md text-tial-400">Company Name</h3>
<span class="font-light text-sm">224k followers</span>
<div class="flex">
<svg class="mr-1" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor"
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
class="css-i6dzq1">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg class="mr-1" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor"
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
class="css-i6dzq1">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg class="mr-1" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor"
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
class="css-i6dzq1">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
</div>
</div>
<div class="flex flex-1 flex-grow w-full items-center justify-end">
<div class="flex items-center mr-2">
<a href="#" class="text-lg uppercase font-semibold text-blue-400 hover:text-blue-600">Follow</a>
<svg class="fill-current text-blue-400 font-semibold " viewBox="0 0 24 24" width="16"
height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"
stroke-linejoin="round" class="css-i6dzq1">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap bg-white border-b border-blue-tial-100 md:w-1/2 lg:w-1/3">
<div class="flex w-full m-4">
<div class="flex items-center">
<img class="h-20 w-24"
src="https://images.unsplash.com/photo-1453847350175-b971869973d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80" />
<div class="flex flex-col p-4">
<h3 class="font-bold text-md text-tial-400">Company Name</h3>
<span class="font-light text-sm">224k followers</span>
<div class="flex">
<svg class="mr-1" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor"
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
class="css-i6dzq1">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg class="mr-1" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor"
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
class="css-i6dzq1">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg class="mr-1" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor"
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
class="css-i6dzq1">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
</div>
</div>
<div class="flex flex-1 flex-grow w-full items-center justify-end">
<div class="flex items-center mr-2">
<a href="#" class="text-lg uppercase font-semibold text-blue-400 hover:text-blue-600">Follow</a>
<svg class="fill-current text-blue-400 font-semibold " viewBox="0 0 24 24" width="16"
height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"
stroke-linejoin="round" class="css-i6dzq1">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-center bg-gray-200">
<a href="#" class="text-lg text-tial-800 font-bold p-4 hover:underline hover:font-tial-600">SHOW MORE</a>
</div>
</div>
How to create a Follow Me with Tailwind CSS?
Here are six tips to help you create a Follow Me ui component with Tailwind CSS:
1. Use a button or a link
You can use a button or a link to create a Follow Me ui component. If you use a button, you can style it with the "bg-blue-500" class to give it a blue background color. If you use a link, you can style it with the "text-blue-500" class to give it a blue text color.
2. Add a label
Your Follow Me ui component should have a label that says "Follow Me" or something similar. You can add the label inside the button or link element and style it with the "text-white" class to make it stand out.
3. Use the hover effect
You can use the "hover:bg-blue-700" class to add a hover effect to your Follow Me ui component. This class changes the background color of the button or link when the user hovers over it.
4. Make it responsive
You can use Tailwind CSS's responsive design classes to make your Follow Me ui component look great on any device. For example, you can use the "md:w-1/2" class to make the Follow Me ui component take up half of the screen on medium-sized devices.
5. Add icons
You can use icons to make your Follow Me ui component more visually appealing. You can use Font Awesome icons and style them with Tailwind CSS classes. For example, you can use the "fa fa-twitter" class to add a Twitter icon to your Follow Me ui component.
6. Use a grid system
You can use Tailwind CSS's grid system to create a layout for your Follow Me ui component. For example, you can use the "grid grid-cols-2" class to create a two-column layout for your Follow Me ui component.
Conclusion
Creating a Follow Me ui component with Tailwind CSS is easy and straightforward. With Tailwind CSS's pre-defined CSS classes and responsive design classes, you can create a Follow Me ui component that looks great on any device. By following these six tips, you can create a Follow Me ui component that stands out on your website and helps you to increase your social media following.