Published on

The Ninja Guide To How To Create A Social media shares and post detail With Tailwind CSS Better

Tags
NavigationsWidget
Social media shares and post detail

Social media is an essential part of our lives, and we spend a lot of time sharing and consuming content on various platforms. As a FrontEnd technology blogger, I am always on the lookout for ways to improve the user experience of social media platforms. In this article, I will show you how to create a Social media shares and post detail UI component using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes that you can use to style your HTML elements. It is designed to be highly customizable and easy to use, allowing you to create complex UI components quickly. Tailwind CSS is gaining popularity among developers because of its flexibility and ease of use.

The description of Social media shares and post detail UI component

The Social media shares and post detail UI component is a common feature of social media platforms. It allows users to share content on their social media profiles and view the details of a post, such as the number of likes, comments, and shares. The UI component typically includes a preview of the post, along with buttons to share the post on various social media platforms.

Why use Tailwind CSS to create a Social media shares and post detail UI component?

Tailwind CSS provides a set of pre-defined classes that you can use to style your UI components. This means that you don't have to write custom CSS for every element, which saves you time and effort. Tailwind CSS also allows you to customize the default styles easily, so you can create a unique look for your UI component. Additionally, Tailwind CSS is highly responsive, so your UI component will look great on all devices.

The preview of Social media shares and post detail UI component

In this section, we will take a look at the preview of the Social media shares and post detail UI component. The UI component includes a preview of the post, along with buttons to share the post on various social media platforms.

Free download of the Social media shares and post detail's source code

The source code of Social media shares and post detail UI component

In this section, we will take a look at the source code of the Social media shares and post detail UI component. The UI component is created using HTML and Tailwind CSS.

<div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 py-8">
	<div class="text-base md:text-sm text-gray-500 px-4 py-6">
		Tags:

		<a href='/tag/random/' class="text-base md:text-sm text-teal-600 no-underline hover:underline">random</a>
		,


		<a href='/tag/misc/' class="text-base md:text-sm text-teal-600 no-underline hover:underline">misc</a>


		</a>
	</div>
	<div class="my-5 text-center flex-row justify-center">
		<a class="font-normal h-8 w-8 p-8 rounded-full outline-none focus:outline-none"
			href='https://www.linkedin.com/sharing/share-offsite/?url=https://ahampriyanshu.pythonanywhere.com/blog/2021/09/10/lorem-ipsum/'
			type="button">
			<svg class="transition duration-700 ease-in-out fill-current cursor-pointer text-gray-700 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-500"
				width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
				<title>Share on LinkedIn</title>
				<path
					d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
			</svg>
		</a>
		<a class="font-normal h-8 w-8 p-8 rounded-full outline-none focus:outline-none"
			href='https://api.whatsapp.com/send?text=https://ahampriyanshu.pythonanywhere.com/blog/2021/09/10/lorem-ipsum/'
			type="button">
			<svg class="transition duration-700 ease-in-out fill-current cursor-pointer text-gray-700 dark:text-gray-400 hover:text-green-500 dark:hover:text-green-500"
				width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
				<title>Share on Whatsapp</title>
				<path
					d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z" />
			</svg>
		</a>
		<a class="font-normal h-8 w-8 p-8 rounded-full outline-none focus:outline-none"
			href='https://t.me/share/url?text=Lorem Ipsum&url=https://ahampriyanshu.pythonanywhere.com/blog/2021/09/10/lorem-ipsum/'
			type="button">
			<svg class="transition duration-700 ease-in-out fill-current cursor-pointer text-gray-700 dark:text-gray-400 hover:text-blue-400 dark:hover:text-blue-400"
				width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
				<title>Share on Telegram</title>
				<path
					d="M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z" />
			</svg>
		</a>
		<a class="font-normal h-8 w-8 p-8 rounded-full outline-none focus:outline-none"
			href='https://t.me/share/url?text=Lorem Ipsum&url=https://ahampriyanshu.pythonanywhere.com/blog/2021/09/10/lorem-ipsum/'
			type="button">
			<svg width="24" height="24"
				class="transition duration-700 ease-in-out fill-current cursor-pointer text-gray-700 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-500"
				xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 512 512" xml:space="preserve">
				<g>
					<g>
						<title>Sharae via e-mail</title>
						<path d="M257,210c-24.814,0-45,20.186-45,45c0,24.814,20.186,45,45,45c24.814,0,45-20.186,45-45C302,230.186,281.814,210,257,210z
                                    			" />
					</g>
				</g>
				<g>
					<g>
						<path d="M255,0C114.39,0,0,114.39,0,255s114.39,257,255,257s257-116.39,257-257S395.61,0,255,0z M362,330
                                    			c-20.273,0-38.152-10.161-49.017-25.596C299.23,319.971,279.354,330,257,330c-41.353,0-75-33.647-75-75c0-41.353,33.647-75,75-75
                                    			c16.948,0,32.426,5.865,45,15.383V195c0-8.291,6.709-15,15-15c8.291,0,15,6.709,15,15c0,33.36,0,41.625,0,75
                                    			c0,16.538,13.462,30,30,30c16.538,0,30-13.462,30-30c0-100.391-66.432-150-135-150c-74.443,0-135,60.557-135,135
                                    			s60.557,135,135,135c30,0,58.374-9.609,82.061-27.803c15.822-12.078,33.94,11.765,18.281,23.789
                                    			C328.353,408.237,293.665,420,257,420c-90.981,0-165-74.019-165-165S166.019,90,257,90c82.897,0,165,61.135,165,180
                                    			C422,303.091,395.091,330,362,330z" />
					</g>
				</g>
				<g></g>
				<g></g>
				<g></g>
				<g></g>
				<g></g>
				<g></g>
				<g></g>
				<g></g>
				<g></g>
				<g></g>
				<g></g>
				<g></g>
				<g></g>
				<g></g>
				<g></g>
			</svg>
		</a>
		<a class="font-normal h-8 w-8 p-8 rounded-full outline-none focus:outline-none"
			href='https://twitter.com/intent/tweet?text=https://ahampriyanshu.pythonanywhere.com/blog/2021/09/10/lorem-ipsum/'
			type="button">
			<svg class="transition duration-700 ease-in-out fill-current cursor-pointer text-gray-700 dark:text-gray-400 hover:text-blue-400 dark:hover:text-blue-400"
				width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
				<title>Share on twitter</title>
				<path
					d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
			</svg>
		</a>
		<a href="https://www.reddit.com/submit?title=Lorem Ipsum&url=https://ahampriyanshu.pythonanywhere.com/blog/2021/09/10/lorem-ipsum/"
			class="font-normal h-8 w-8 p-8 rounded-full outline-none focus:outline-none" type="button">
			<svg class="transition duration-700 ease-in-out fill-current cursor-pointer text-gray-700 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-600"
				width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
				<title>Share on reddit</title>
				<path
					d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z" />
			</svg>
		</a>
	</div>
	<!-- Author -->
	<div class="mx-8 md:mx-12 lg:mx-24 xl:mx-36 pt-2 bg-gray-50 md:bg-white md:shadow-lg dark:bg-gray-900 md:dark:bg-gray-800
                           md:p-6 md:shadow-lg md:rounded-lg mb-10 flex justify-between items-center">
		<a href='/author/[email protected]/'>
			<div class="flex">
				<div class="mr-4">
					<img class="overflow-hidden w-12 h-12 object-cover rounded-full" 
                    src="https://ahampriyanshu.com/blog/logo.png" alt="avatar"/>
                            </div>
					<div>
						<p class="sm:text-sm md:text-lg lg:text-xl font-medium text-gray-900 dark:text-white">
							[email protected]</p>
						<p class="text-xs md:text-sm text-gray-600 dark:text-gray-400">
							The author has published
							3
							articles since
							Aug, 2021
						</p>
					</div>
				</div>
		</a>
		<a href='/author/[email protected]/' class="bg-teal-500 hidden md:block text-white active:bg-teal-400
                             rounded shadow hover:shadow-lg outline-none focus:outline-none h-auto text-xs p-3">Read
			More</a>
	</div>
	<!-- Next & Prev Links -->
	<div class="font-sans flex justify-between content-center px-4 pb-12">

		<div class="text-left">
			<a href="/blog/2021/08/23/nft-and-defi/">
				<span class="text-sm md:text-sm font-normal text-gray-600 dark:text-gray-400">
                                    &lt; Previous Post</span><br/></a>
				<p>
					<a href="/blog/2021/08/23/nft-and-defi/"
						class="break-normal text-xs md:text-sm text-teal-500 no-underline hover:underline">
						Figuring Out NFT …
					</a>
				</p>
		</div>


		<div class="text-right">
			<a href="/blog/2021/09/10/getting-started/">
				<span class="text-sm md:text-sm font-normal text-gray-600 dark:text-gray-400">
                                    Next Post &gt;
                                </span>
				<br/></a>
				<p>
					<a href="/blog/2021/09/10/getting-started/"
						class="break-normal text-xs md:text-sm text-teal-500 no-underline hover:underline">
						Getting Started
					</a>
				</p>
		</div>

	</div>
</div>

How to create a Social media shares and post detail with Tailwind CSS?

Now that we have an understanding of what Tailwind CSS is and why it is beneficial to use it to create a Social media shares and post detail UI component, let's dive into the steps to create it.

Step 1: Set up the HTML structure

The first step is to set up the HTML structure for the UI component. We will use a div element with a class of 'social-media-post' to wrap the entire UI component. Inside this div element, we will create another div element with a class of 'post-preview' to display the preview of the post. We will also include a div element with a class of 'post-details' to display the details of the post.

<div class="social-media-post">
  <div class="post-preview">
    <!-- Preview of the post -->
  </div>
  <div class="post-details">
    <!-- Details of the post -->
  </div>
</div>

Step 2: Style the UI component using Tailwind CSS

The next step is to style the UI component using Tailwind CSS. We will use the pre-defined classes provided by Tailwind CSS to style the various elements of the UI component. We will also customize the default styles to create a unique look for the UI component.

.social-media-post {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

.post-preview {
  width: 100%;
  height: 20rem;
  background-color: #f7fafc;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.post-details {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.post-details p {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
}

.post-details button {
  background-color: #4299e1;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.post-details button:hover {
  background-color: #3182ce;
}

Step 3: Add the preview of the post

The next step is to add the preview of the post to the UI component. We will use an image element to display the preview of the post and include a caption to provide context.

<div class="post-preview">
  <img src="https://via.placeholder.com/600x400" alt="Post preview" class="w-full h-full object-cover">
  <p class="text-center text-gray-500 mt-2">Caption for the post preview</p>
</div>

Step 4: Add the details of the post

The final step is to add the details of the post to the UI component. We will use paragraph elements to display the number of likes, comments, and shares, along with buttons to share the post on various social media platforms.

<div class="post-details">
  <p>100 Likes</p>
  <div>
    <button>Share on Facebook</button>
    <button>Share on Twitter</button>
    <button>Share on LinkedIn</button>
  </div>
</div>

Conclusion

In this article, we learned how to create a Social media shares and post detail UI component using Tailwind CSS. We discussed the benefits of using Tailwind CSS and provided a step-by-step guide to create the UI component. By following these steps, you can create a unique and responsive UI component that will enhance the user experience of your social media platform.