Published on

How To Create A Reddit Clone With Tailwind CSS In 6 Easy Steps?

Tags
Pages
Reddit Clone

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Reddit Clone ui component

A clone of reddit using tailwind css

Why use Tailwind CSS to create a Reddit Clone ui component?

  • It can make the building process of Reddit Clone ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Reddit Clone component file.

The preview of Reddit Clone ui component

Free download of the Reddit Clone's source code

The source code of Reddit Clone ui component

<div class="flex bg-blue-lightest flex flex-col font-sans">
		<header>
			<div class="px-5 w-full fixed h-12 bg-white border-grey-lightest border-b flex items-center">
				<div class="container mx-auto flex">
					<div class="w-3/5 flex">
						<div class="">
							<a href="#" class="w-auto inline-flex items-center h-full">
								<svg class="h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g><circle fill="#FF4500" cx="10" cy="10" r="10"></circle><path fill="#FFF" d="M16.67,10A1.46,1.46,0,0,0,14.2,9a7.12,7.12,0,0,0-3.85-1.23L11,4.65,13.14,5.1a1,1,0,1,0,.13-0.61L10.82,4a0.31,0.31,0,0,0-.37.24L9.71,7.71a7.14,7.14,0,0,0-3.9,1.23A1.46,1.46,0,1,0,4.2,11.33a2.87,2.87,0,0,0,0,.44c0,2.24,2.61,4.06,5.83,4.06s5.83-1.82,5.83-4.06a2.87,2.87,0,0,0,0-.44A1.46,1.46,0,0,0,16.67,10Zm-10,1a1,1,0,1,1,1,1A1,1,0,0,1,6.67,11Zm5.81,2.75a3.84,3.84,0,0,1-2.47.77,3.84,3.84,0,0,1-2.47-.77,0.27,0.27,0,0,1,.38-0.38A3.27,3.27,0,0,0,10,14a3.28,3.28,0,0,0,2.09-.61A0.27,0.27,0,1,1,12.48,13.79Zm-0.18-1.71a1,1,0,1,1,1-1A1,1,0,0,1,12.29,12.08Z"></path></g></svg>
								<svg class="h-5 ml-2 hidden xl:flex" viewBox="0 0 55 17.44"><g fill="#1c1c1c"><circle fill="#FF4500" cx="45.77" cy="3.33" r="2.05"></circle><path fill="inherit" d="M16.73,12.05a1.44,1.44,0,0,0,1.54-1.48,4.91,4.91,0,0,0-.1-0.83,5.66,5.66,0,0,0-5.34-4.61c-3,0-5.51,2.76-5.51,6.15s2.47,6.15,5.51,6.15a5.47,5.47,0,0,0,4.26-1.78,1.19,1.19,0,0,0-.19-1.77,1.25,1.25,0,0,0-1.53.16,3.78,3.78,0,0,1-2.54,1.09,3.42,3.42,0,0,1-3.14-3.08h7ZM12.82,7.44a3.3,3.3,0,0,1,3,2.56h-6A3.3,3.3,0,0,1,12.82,7.44Z"></path><path fill="inherit" d="M7.44,6.32a1.15,1.15,0,0,0-1-1.14A4.46,4.46,0,0,0,2.31,6.69V6.54A1.15,1.15,0,1,0,0,6.54V16a1.18,1.18,0,0,0,1.08,1.2A1.15,1.15,0,0,0,2.31,16V11.15A3.51,3.51,0,0,1,6.15,7.47H6.38A1.15,1.15,0,0,0,7.44,6.32Z"></path><path fill="inherit" d="M46.92,7.56a1.15,1.15,0,0,0-2.31,0V16a1.15,1.15,0,1,0,2.31,0V7.56Z"></path><path fill="inherit" d="M29.87,1.15A1.15,1.15,0,0,0,28.72,0h0a1.15,1.15,0,0,0-1.15,1.15V6.31a4,4,0,0,0-2.95-1.18c-3,0-5.51,2.76-5.51,6.15s2.47,6.15,5.51,6.15a4.08,4.08,0,0,0,3-1.19A1.15,1.15,0,0,0,29.87,16V1.15Zm-5.26,14c-1.77,0-3.21-1.72-3.21-3.85s1.43-3.85,3.21-3.85,3.21,1.72,3.21,3.85S26.39,15.13,24.62,15.13Z"></path><path fill="inherit" d="M41.92,1.15A1.15,1.15,0,0,0,40.77,0h0a1.15,1.15,0,0,0-1.15,1.15V6.31a4,4,0,0,0-2.95-1.18c-3,0-5.51,2.76-5.51,6.15s2.47,6.15,5.51,6.15a4.08,4.08,0,0,0,3-1.19A1.15,1.15,0,0,0,41.92,16V1.15Zm-5.26,14c-1.77,0-3.21-1.72-3.21-3.85s1.43-3.85,3.21-3.85,3.21,1.72,3.21,3.85S38.44,15.13,36.67,15.13Z"></path><path fill="inherit" d="M52.91,16V7.44h1a1,1,0,0,0,1.06-1,1,1,0,0,0-1-1.09H52.91V3.76a1.18,1.18,0,0,0-1.08-1.19,1.15,1.15,0,0,0-1.23,1.15V5.38h-1a1,1,0,0,0-1.06,1,1,1,0,0,0,1,1.09h1V16a1.15,1.15,0,0,0,1.15,1.15h0A1.15,1.15,0,0,0,52.91,16Z"></path></g></svg>
							</a>
						</div>
						<div class="ml-5">
							<div class="w-68 h-full border border-white hover:border-grey-lightest flex items-center rounded px-10 relative">
								<svg class="w-5 absolute pin-l ml-2 fill-current text-blue-dark" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g><polygon fill="none" points="0 20 20 20 20 0 0 0"></polygon><polygon fill="inherit" points="12.5 3.5 20 3.5 20 11 17.5 8.5 11.25 14.75 7.5 11 2.5 16 0 13.5 7.5 6 11.25 9.75 15 6"></polygon></g></svg>
								<span class="font-medium text-sm">Popular</span>
								<svg class="w-6 absolute pin-r mr-2" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g><path fill="inherit" d="M14.1711599,9.3535 L9.99925636,13.529 L5.82735283,9.3535 C5.51262415,9.0385 5.73543207,8.5 6.18054835,8.5 L13.8179644,8.5 C14.2630807,8.5 14.4858886,9.0385 14.1711599,9.3535"></path></g></svg>
							</div>
						</div>
						<div class="w-full mx-5">
							<div class="flex items-center w-auto h-full pl-8 pr-2 border border-grey-lightest hover:border-blue rounded relative">
								<svg class="w-4 absolute pin-l ml-2 fill-current text-grey-dark" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g><path d="M12.4743167,11.1299698 L14.6957506,13.2817166 C15.0924476,13.665969 15.1025359,14.2990536 14.7182834,14.6957506 C14.334031,15.0924476 13.7009464,15.1025359 13.3042494,14.7182834 L11.0486163,12.5334103 C10.0079655,13.2768564 8.73367013,13.7142857 7.35714286,13.7142857 C3.84600096,13.7142857 1,10.8682847 1,7.35714286 C1,3.84600096 3.84600096,1 7.35714286,1 C10.8682847,1 13.7142857,3.84600096 13.7142857,7.35714286 C13.7142857,8.76975383 13.2536226,10.0747029 12.4743167,11.1299698 Z M11.7142857,7.35714286 C11.7142857,4.95057046 9.76371525,3 7.35714286,3 C4.95057046,3 3,4.95057046 3,7.35714286 C3,9.76371525 4.95057046,11.7142857 7.35714286,11.7142857 C9.76371525,11.7142857 11.7142857,9.76371525 11.7142857,7.35714286 Z"></path></g></svg>
								<input class="text-sm w-full" type="text" name="search" placeholder="Search Reddit">
							</div>
						</div>
					</div>
					<div class="w-2/5 flex justify-end items-center">
						<a href="#" class="p-2 flex items-center rounded-sm mr-2 hover:bg-grey-lighter">
							<svg class="w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g><polygon fill="none" points="0 20 20 20 20 0 0 0"></polygon><polygon fill="inherit" points="12.5 3.5 20 3.5 20 11 17.5 8.5 11.25 14.75 7.5 11 2.5 16 0 13.5 7.5 6 11.25 9.75 15 6"></polygon></g></svg>
						</a>
						<a href="#" class="p-2 flex items-center rounded-sm mr-2 hover:bg-grey-lighter">
							<svg class="w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g fill-rule="evenodd"><polygon fill="none" points="0 20 20 20 20 .001 0 .001"></polygon><path fill="inherit" d="M1.25,17.5 L1.25,7.5 L6.25,7.5 L6.25,17.5 L1.25,17.5 Z M12.49995,17.5001 L7.49995,17.5001 L7.49995,5.0001 L4.99995,5.0001 L9.99995,0.0006 L14.99995,5.0001 L12.49995,5.0001 L12.49995,17.5001 Z M13.75,17.5 L13.75,12.5 L18.75,12.5 L18.75,17.5 L13.75,17.5 Z"></path></g></svg>
						</a>
						<a href="#" class="p-2 flex items-center rounded-sm mr-2 hover:bg-grey-lighter">
							<svg class="w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="inherit" d="M16.9998,2.9995 C18.1028,2.9995 18.9998,3.8975 18.9998,4.9995 L18.9998,14.9995 C18.9998,16.1025 18.1028,16.9995 16.9998,16.9995 L2.9998,16.9995 C1.8978,16.9995 0.9998,16.1025 0.9998,14.9995 L0.9998,4.9995 C0.9998,3.8975 1.8978,2.9995 2.9998,2.9995 L16.9998,2.9995 Z M13.9648,13.3525 C15.2718,13.3525 16.3188,12.6745 16.8278,11.5665 L15.1818,10.9775 C14.9318,11.4765 14.4528,11.8165 13.8338,11.8165 C13.0158,11.8165 12.3478,11.0575 12.3478,9.9995 C12.3478,8.9525 13.0058,8.1735 13.8438,8.1735 C14.4528,8.1735 14.9218,8.5025 15.1308,8.9615 L16.6968,8.2435 C16.1988,7.2755 15.2108,6.6365 13.9648,6.6365 C12.0588,6.6365 10.5118,8.1335 10.5118,9.9995 C10.5118,11.8755 12.0588,13.3525 13.9648,13.3525 Z M6.6248,13.3635 C8.5408,13.3635 10.0878,11.8755 10.0878,9.9995 C10.0878,8.1335 8.5408,6.6365 6.6248,6.6365 C4.7188,6.6365 3.1718,8.1335 3.1718,9.9995 C3.1718,11.8755 4.7188,13.3635 6.6248,13.3635 Z M6.625,8.1641 C7.562,8.1641 8.262,8.9421 8.262,10.0001 C8.262,11.0481 7.562,11.8361 6.625,11.8361 C5.697,11.8361 4.998,11.0481 4.998,10.0001 C4.998,8.9421 5.697,8.1641 6.625,8.1641 Z"></path></svg>
						</a>
						<a href="#" class="border border-blue-dark text-blue-dark px-8 py-2.2 font-semibold text-xs rounded ml-4 no-underline hover:border-blue hover:text-blue">LOG IN</a>
						<a href="#" class="border border-blue-dark bg-blue-dark text-white px-8 py-2.2 font-semibold text-xs rounded ml-4 no-underline hover:bg-blue">SIGN UP</a>
						<button class="inline-flex items-center ml-3 mr-5">
							<div class="flex items-center pr-2">
								<svg class="w-6 fill-current text-grey-dark" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"><g fill="inherit"><path d="M146.8 142.6h-37.6c-31.1 0-56.5 25.3-56.5 56.5 0 5.2 4.2 9.4 9.4 9.4h131.8c5.2 0 9.4-4.2 9.4-9.4 0-31.2-25.3-56.5-56.5-56.5zM128 130.7c20.1 0 36.4-16.3 36.4-36.4v-9.4c0-20.1-16.3-36.4-36.4-36.4S91.6 64.8 91.6 84.9v9.4c0 20.1 16.3 36.4 36.4 36.4z"></path></g></svg>
							</div>
							<svg class="w-6" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g><path fill="inherit" d="M14.1711599,9.3535 L9.99925636,13.529 L5.82735283,9.3535 C5.51262415,9.0385 5.73543207,8.5 6.18054835,8.5 L13.8179644,8.5 C14.2630807,8.5 14.4858886,9.0385 14.1711599,9.3535"></path></g></svg>
						</button>
					</div>
				</div>
			</div>
		</header>
		<div class="mt-12">
			<div class="bg-white mb-3">
				<div class="container mx-auto">
					<div class="flex w-960 mx-auto">
						<div class="w-2/3 py-2">
							<div class="inline-flex items-center mr-6">
								<div class="text-xxs text-grey font-semibold mr-4">VIEW</div>
								<div>
									<button>
										<svg class="h-5 fill-current text-blue" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="inherit" d="M1.75,9.375 L1.75,1.75 L18.25,1.75 L18.25,9.375 L1.75,9.375 Z M1.75,18.25 L1.75,10.625 L18.25,10.625 L18.25,18.25 L1.75,18.25 Z"></path></svg>
									</button>
									<button>
										<svg class="h-5 fill-current text-blue opacity-25" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="inherit" d="M1.75,6.60294118 L1.75,1.75 L18.25,1.75 L18.25,6.60294118 L1.75,6.60294118 Z M1.75,12.4264706 L1.75,7.57352941 L18.25,7.57352941 L18.25,12.4264706 L1.75,12.4264706 Z M1.75,18.25 L1.75,13.3970588 L18.25,13.3970588 L18.25,18.25 L1.75,18.25 Z"></path></svg>
									</button>
									<button>
										<svg class="h-5 fill-current text-blue opacity-25" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="inherit" d="M1.75,4.95149254 L1.75,1.75 L18.25,1.75 L18.25,4.95149254 L1.75,4.95149254 Z M1.75,9.38432836 L1.75,6.18283582 L18.25,6.18283582 L18.25,9.38432836 L1.75,9.38432836 Z M1.75,18.25 L1.75,15.0485075 L18.25,15.0485075 L18.25,18.25 L1.75,18.25 Z M1.75,13.8171642 L1.75,10.6156716 L18.25,10.6156716 L18.25,13.8171642 L1.75,13.8171642 Z"></path></svg>
									</button>
								</div>
							</div>
							<div class="inline-flex items-center">
								<div class="text-xxs text-grey font-semibold mr-4">SORT</div>
								<div class="inline-flex items-center">
									<button class="inline-flex items-center">
										<svg class="h-4 fill-current text-blue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Hot</title><path d="M10.31.61a.5.5,0,0,0-.61,0C9.41.83,2.75,6.07,2.75,11.47a8.77,8.77,0,0,0,3.14,6.91.5.5,0,0,0,.75-.64,3.84,3.84,0,0,1-.55-2A7.2,7.2,0,0,1,10,9.56a7.2,7.2,0,0,1,3.91,6.23,3.84,3.84,0,0,1-.55,2,.5.5,0,0,0,.75.64,8.77,8.77,0,0,0,3.14-6.91C17.25,6.07,10.59.83,10.31.61Z"></path></svg>
										<span class="text-blue text-xs font-semibold ml-1 mr-2">HOT</span>
										<svg class="h-4 fill-current text-blue" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g><path fill="inherit" d="M14.1711599,9.3535 L9.99925636,13.529 L5.82735283,9.3535 C5.51262415,9.0385 5.73543207,8.5 6.18054835,8.5 L13.8179644,8.5 C14.2630807,8.5 14.4858886,9.0385 14.1711599,9.3535"></path></g></svg>
									</button>
									<button class="inline-flex items-center ml-3">
										<span class="text-blue text-xs font-semibold ml-1 mr-2">EVERYWHERE</span>
										<svg class="h-4 fill-current text-blue" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g><path fill="inherit" d="M14.1711599,9.3535 L9.99925636,13.529 L5.82735283,9.3535 C5.51262415,9.0385 5.73543207,8.5 6.18054835,8.5 L13.8179644,8.5 C14.2630807,8.5 14.4858886,9.0385 14.1711599,9.3535"></path></g></svg>
									</button>
								</div>
							</div>
						</div>
						<div class="w-1/3">&nbsp;</div>
					</div>
				</div>
			</div>
			<div class="container mx-auto">
				<div class="flex w-960 mx-auto">
					<div class="w-2/3">
						<div class="py-2">
							<div class="flex border border-grey-light-alt hover:border-grey rounded bg-white cursor-pointer">
								<div class="w-1/12 flex flex-col text-center pt-2">
									<button class="text-xs">
										<svg class="w-5 fill-current text-grey" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7 10v8h6v-8h5l-8-8-8 8h5z"/></svg>
									</button>
									<span class="text-xs font-semibold my-1">20k</span>
									<button class="text-xs">
										<svg class="w-5 fill-current text-grey" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7 10V2h6v8h5l-8 8-8-8h5z"/></svg>
									</button>
								</div>
								<div class="w-11/12 pt-2">
									<div class="flex items-center text-xs mb-2">
										<a href="#" class="font-semibold no-underline hover:underline text-black flex items-center">
											<img class="rounded-full border h-5 w-5" src="https://avatars0.githubusercontent.com/u/30317862?s=200&v=4">
											<span class="ml-2">r/tailwind</span>
										</a>
										<span class="text-grey-light mx-1 text-xxs">•</span>
										<span class="text-grey">Posted by</span>
										<a href="#" class="text-grey mx-1 no-underline hover:underline">u/TestUser</a>
										<span class="text-grey">2 hours ago</span>
									</div>
									<div>
										<h2 class="text-lg font-medium mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor placerat turpis eu semper.</h2>
									</div>
									<div class="inline-flex items-center my-1">
										<div class="flex hover:bg-grey-lighter p-1">
											<svg class="w-4 fill-current text-grey" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-4 4v-4H2a2 2 0 0 1-2-2V3c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-8zM5 7v2h2V7H5zm4 0v2h2V7H9zm4 0v2h2V7h-2z"/></svg>
											<span class="ml-2 text-xs font-semibold text-grey">3k Comments</span>
										</div>
										<div class="flex hover:bg-grey-lighter p-1 ml-2">
											<svg class="w-4 fill-current text-grey" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5.08 12.16A2.99 2.99 0 0 1 0 10a3 3 0 0 1 5.08-2.16l8.94-4.47a3 3 0 1 1 .9 1.79L5.98 9.63a3.03 3.03 0 0 1 0 .74l8.94 4.47A2.99 2.99 0 0 1 20 17a3 3 0 1 1-5.98-.37l-8.94-4.47z"/></svg>
											<span class="ml-2 text-xs font-semibold text-grey">Share</span>
										</div>
										<div class="flex hover:bg-grey-lighter p-1 ml-2">
											<svg class="w-4 fill-current text-grey" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 2C0 .9.9 0 2 0h14l4 4v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5 0v6h10V2H5zm6 1h3v4h-3V3z"/></svg>
											<span class="ml-2 text-xs font-semibold text-grey">Save</span>
										</div>
										<div class="flex hover:bg-grey-lighter p-1 ml-2 rotate-90">
											<svg class="w-4 fill-current text-grey" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0-6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="w-1/3 ml-5">
						<div class="py-2">
							<div class="rounded bg-white mb-4">
								<div class="p-3">
									<div class="h-8 -m-3 bg-no-repeat bg-100%" style="background-image: url('https://www.redditstatic.com/desktop2x/img/id-cards/[email protected]');">
									</div>
									<div>
										<div class="inline-flex items-center">
											<img src="https://www.redditstatic.com/desktop2x/img/id-cards/[email protected]" class="h-16">
											<span class="text-lg ml-4 mt-6">r/popular</span>
										</div>
										<p class="font-normal mb-3 text-sm leading-normal">The best posts on Reddit for you, pulled from the most active communities on Reddit. Check here to see the most shared, upvoted, and commented content on the internet.</p>
										<button class="bg-blue-dark text-sm text-white font-semibold rounded px-4 py-2 w-full">CREATE POST</button>
									</div>
								</div>
							</div>
							<div class="rounded bg-white mb-4">
								<div class="p-2">
									<div class="flex items-center">
										<svg class="h-6 w-6 mr-4 text-orange fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Reddit Premium</title><path d="M13.535 15.785c-1.678.244-2.883.742-3.535 1.071v-5.113a2 2 0 0 0-2-2H4.217c.044-.487.076-1.016.076-1.629 0-1.692-.489-2.968-.884-3.722L4.8 3.001H10v4.742a2 2 0 0 0 2 2h3.783c.06.67.144 1.248.22 1.742.097.632.182 1.177.182 1.745 0 1.045-.829 2.291-2.65 2.555m5.028-12.249l-2.242-2.242a1 1 0 0 0-.707-.293H4.386a1 1 0 0 0-.707.293L1.436 3.536a1 1 0 0 0-.069 1.337c.009.011.926 1.2.926 3.241 0 1.304-.145 2.24-.273 3.065-.106.684-.206 1.33-.206 2.051 0 1.939 1.499 4.119 4.364 4.534 2.086.304 3.254 1.062 3.261 1.065a1.016 1.016 0 0 0 1.117.004c.011-.007 1.18-.765 3.266-1.069 2.864-.415 4.363-2.595 4.363-4.534 0-.721-.099-1.367-.206-2.051-.128-.825-.272-1.761-.272-3.065 0-2.033.893-3.199.926-3.241a.999.999 0 0 0-.07-1.337"></path></svg>
										<div class="flex flex-col">
											<span class="text-xs font-medium text-black-alt mb-1">Reddit Premium</span>
											<span class="text-xxs font-normal">Ads-free browsing</span>
										</div>
										<div class="flex ml-auto">
											<button class="bg-orange text-xs text-white font-semibold rounded px-4 py-2 ml-auto">GET PREMIUM</button>
										</div>
									</div>
								</div>
							</div>
							<div class="rounded bg-white mb-4">
								<div class="p-3 text-xxs font-semibold w-full">TRENDING COMMUNITIES</div>
								<div class="pb-4">
									<div class="px-3 py-2">
										<div class="flex">
											<img class="h-8 w-8 border rounded-full mr-2" src="https://avatars0.githubusercontent.com/u/30317862?s=200&v=4">
											<div class="flex flex-col font-medium">
												<a href="#" class="text-xs text-black-alt no-underline leading-tight">r/tailwind</a>
												<span class="text-xxs">1.000 subscribers</span>
											</div>
											<div class="flex ml-auto">
												<button class="bg-blue-dark text-xs text-white font-semibold rounded px-4 ml-auto">SUBSCRIBE</button>
											</div>
										</div>
									</div>
									<div class="px-3 py-2">
										<div class="flex">
											<img class="h-8 w-8 border rounded-full mr-2" src="https://avatars0.githubusercontent.com/u/30317862?s=200&v=4">
											<div class="flex flex-col font-medium">
												<a href="#" class="text-xs text-black-alt no-underline leading-tight">r/tailwind</a>
												<span class="text-xxs">1.000 subscribers</span>
											</div>
											<div class="flex ml-auto">
												<button class="bg-blue-dark text-xs text-white font-semibold rounded px-4 ml-auto">SUBSCRIBE</button>
											</div>
										</div>
									</div>
									<div class="px-3 py-2">
										<div class="flex">
											<img class="h-8 w-8 border rounded-full mr-2" src="https://avatars0.githubusercontent.com/u/30317862?s=200&v=4">
											<div class="flex flex-col font-medium">
												<a href="#" class="text-xs text-black-alt no-underline leading-tight">r/tailwind</a>
												<span class="text-xxs">1.000 subscribers</span>
											</div>
											<div class="flex ml-auto">
												<button class="bg-blue-dark text-xs text-white font-semibold rounded px-4 ml-auto">SUBSCRIBE</button>
											</div>
										</div>
									</div>
									<div class="px-3 py-2">
										<div class="flex">
											<img class="h-8 w-8 border rounded-full mr-2" src="https://avatars0.githubusercontent.com/u/30317862?s=200&v=4">
											<div class="flex flex-col font-medium">
												<a href="#" class="text-xs text-black-alt no-underline leading-tight">r/tailwind</a>
												<span class="text-xxs">1.000 subscribers</span>
											</div>
											<div class="flex ml-auto">
												<button class="bg-blue-dark text-xs text-white font-semibold rounded px-4 ml-auto">SUBSCRIBE</button>
											</div>
										</div>
									</div>
									<div class="px-3 py-2">
										<div class="flex">
											<img class="h-8 w-8 border rounded-full mr-2" src="https://avatars0.githubusercontent.com/u/30317862?s=200&v=4">
											<div class="flex flex-col font-medium">
												<a href="#" class="text-xs text-black-alt no-underline leading-tight">r/tailwind</a>
												<span class="text-xxs">1.000 subscribers</span>
											</div>
											<div class="flex ml-auto">
												<button class="bg-blue-dark text-xs text-white font-semibold rounded px-4 ml-auto">SUBSCRIBE</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="rounded bg-white mb-4">
								<div class="p-3">
									<div class="flex justify-between">
										<div>
											<a href="#" class="block text-black no-underline text-xs font-medium">About</a>
											<a href="#" class="block text-black no-underline text-xs font-medium">Careers</a>
											<a href="#" class="block text-black no-underline text-xs font-medium">Press</a>
										</div>
										<div>
											<a href="#" class="block text-black no-underline text-xs font-medium">Advertise</a>
											<a href="#" class="block text-black no-underline text-xs font-medium">Blog</a>
											<a href="#" class="block text-black no-underline text-xs font-medium">Help</a>
										</div>
										<div>
											<a href="#" class="block text-black no-underline text-xs font-medium">The Reddit App</a>
											<a href="#" class="block text-black no-underline text-xs font-medium">Reddit Coins</a>
											<a href="#" class="block text-black no-underline text-xs font-medium">Reddit Premium</a>
											<a href="#" class="block text-black no-underline text-xs font-medium">Reddit Gifts</a>
										</div>
									</div>
									<div class="text-center mt-6">
										<p class="text-xs text-black leading-tight font-medium">
											<a href="#" class="text-black no-underline">Content Policy</a> | <a href="#" class="text-black no-underline">Privacy Policy</a>
										</p>
										<p class="text-xs text-black leading-tight font-medium">
											<a href="#" class="text-black no-underline">User Agreement</a> | <a href="#" class="text-black no-underline">Mod Policy</a>
										</p>
										<p class="text-xs text-black leading-tight font-medium">© 2018 Reddit, Inc. All rights reserved</p>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>

How to create a Reddit Clone with Tailwind CSS?

Install tailwind css of verion 0.7.0

Use the link html tag to import the stylesheet of Tailwind CSS of the version 0.7.0

<link href=https://unpkg.com/[email protected]/dist/tailwind.min.css rel="stylesheet">

All the unility class needed to create a Reddit Clone component

  • flex
  • bg-blue-lightest
  • flex-col
  • px-5
  • w-full
  • fixed
  • h-12
  • bg-white
  • border-grey-lightest
  • border-b
  • mx-auto
  • w-3/5
  • w-auto
  • inline-flex
  • h-full
  • h-8
  • h-5
  • ml-2
  • hidden
  • xl:flex
  • ml-5
  • w-68
  • border-white
  • hover:border-grey-lightest
  • px-10
  • relative
  • w-5
  • absolute
  • text-blue-dark
  • text-sm
  • w-6
  • mr-2
  • mx-5
  • pl-8
  • pr-2
  • hover:border-blue
  • w-4
  • text-grey-dark
  • w-2/5
  • p-2
  • hover:bg-grey-lighter
  • border-blue-dark
  • px-8
  • py-2.2
  • text-xs
  • ml-4
  • hover:text-blue
  • bg-blue-dark
  • text-white
  • hover:bg-blue
  • ml-3
  • mr-5
  • mt-12
  • mb-3
  • w-960
  • w-2/3
  • py-2
  • mr-6
  • text-xxs
  • text-grey
  • mr-4
  • text-blue
  • h-4
  • ml-1
  • w-1/3
  • border-grey-light-alt
  • hover:border-grey
  • w-1/12
  • text-center
  • pt-2
  • my-1
  • w-11/12
  • mb-2
  • text-black
  • text-grey-light
  • mx-1
  • text-lg
  • mb-1
  • p-1
  • mb-4
  • p-3
  • -m-3
  • bg-no-repeat
  • bg-100%
  • h-16
  • mt-6
  • px-4
  • h-6
  • text-orange
  • text-black-alt
  • ml-auto
  • bg-orange
  • pb-4
  • px-3
  • w-8
  • block

96 steps to create a Reddit Clone component with Tailwind CSS

  1. Use flex to create a block-level flex container.

  2. Control the background color of an element to blue-lightest using the bg-blue-lightest utilities.

  3. Use flex to create a block-level flex container.

  4. Control the horizontal padding of an element to 1.25rem using the px-5 utilities.

  5. Use w-full to set an element to a 100% based width.

  6. Use fixed to position an element relative to the browser window.

  7. Use h-12 to set an element to a fixed height(3rem).

  8. Control the background color of an element to white using the bg-white utilities.

  9. Control the border color of an element to grey-lightest using the border-grey-lightest utilities.

  10. Control the border color of an element to b using the border-b utilities.

  11. Control the horizontal margin of an element to auto using the mx-auto utilities.

  12. Use w-3/5 to set an element to a fixed width(3/5).

  13. The w-auto utility can be useful if you need to remove an element’s assigned width under a specific condition, like at a particular breakpoint.

  14. Use inline-flex to create an inline flex container that flows with text.

  15. Use h-full to set an element’s height to 100% of its parent, as long as the parent has a defined height.

  16. Use h-8 to set an element to a fixed height(2rem).

  17. Use h-5 to set an element to a fixed height(1.25rem).

  18. Control the margin on left side of an element to 0.5rem using the ml-2 utilities.

  19. Use hidden to set an element to display: none and remove it from the page layout.

  20. Use flex to create a block-level flex container at only extremely large screen sizes.

  21. Control the margin on left side of an element to 1.25rem using the ml-5 utilities.

  22. Use w-68 to set an element to a fixed width(17rem).

  23. Control the border color of an element to white using the border-white utilities.

  24. Control the border color of an element to grey-lightest using the hover:border-grey-lightest utilities on hover.

  25. Control the horizontal padding of an element to 2.5rem using the px-10 utilities.

  26. Use relative to position an element according to the normal flow of the document.

  27. Use w-5 to set an element to a fixed width(1.25rem).

  28. Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

  29. Control the text color of an element to blue-dark using the text-blue-dark utilities.

  30. Control the text color of an element to sm using the text-sm utilities.

  31. Use w-6 to set an element to a fixed width(1.5rem).

  32. Control the margin on right side of an element to 0.5rem using the mr-2 utilities.

  33. Control the horizontal margin of an element to 1.25rem using the mx-5 utilities.

  34. Adjust the left padding of the element to 2rem using the pl-8 utilities class

  35. Control the padding on right side of an element to 0.5rem using the pr-2 utilities.

  36. Control the border color of an element to blue using the hover:border-blue utilities on hover.

  37. Use w-4 to set an element to a fixed width(1rem).

  38. Control the text color of an element to grey-dark using the text-grey-dark utilities.

  39. Use w-2/5 to set an element to a fixed width(2/5).

  40. Control the padding on all sides of an element to 0.5rem using the p-2 utilities.

  41. Control the background color of an element to grey-lighter using the hover:bg-grey-lighter utilities on hover.

  42. Control the border color of an element to blue-dark using the border-blue-dark utilities.

  43. Control the horizontal padding of an element to 2rem using the px-8 utilities.

  44. Control the vertical padding of an element to 2.2 using the py-2.2 utilities.

  45. Control the text color of an element to xs using the text-xs utilities.

  46. Control the margin on left side of an element to 1rem using the ml-4 utilities.

  47. Control the text color of an element to blue on hover using the hover:text-blue utilities.

  48. Control the background color of an element to blue-dark using the bg-blue-dark utilities.

  49. Control the text color of an element to white using the text-white utilities.

  50. Control the background color of an element to blue using the hover:bg-blue utilities on hover.

  51. Control the margin on left side of an element to 0.75rem using the ml-3 utilities.

  52. Control the margin on right side of an element to 1.25rem using the mr-5 utilities.

  53. Control the margin on top side of an element to 3rem using the mt-12 utilities.

  54. Control the margin on bottom side of an element to 0.75rem using the mb-3 utilities.

  55. Use w-960 to set an element to a fixed width(240rem).

  56. Use w-2/3 to set an element to a fixed width(2/3).

  57. Control the vertical padding of an element to 0.5rem using the py-2 utilities.

  58. Control the margin on right side of an element to 1.5rem using the mr-6 utilities.

  59. Control the text color of an element to xxs using the text-xxs utilities.

  60. Control the text color of an element to grey using the text-grey utilities.

  61. Control the margin on right side of an element to 1rem using the mr-4 utilities.

  62. Control the text color of an element to blue using the text-blue utilities.

  63. Use h-4 to set an element to a fixed height(1rem).

  64. Control the margin on left side of an element to 0.25rem using the ml-1 utilities.

  65. Use w-1/3 to set an element to a fixed width(1/3).

  66. Control the border color of an element to grey-light-alt using the border-grey-light-alt utilities.

  67. Control the border color of an element to grey using the hover:border-grey utilities on hover.

  68. Use w-1/12 to set an element to a fixed width(1/12).

  69. Control the text color of an element to center using the text-center utilities.

  70. Control the padding on top side of an element to 0.5rem using the pt-2 utilities.

  71. Control the vertical margin of an element to 0.25rem using the my-1 utilities.

  72. Use w-11/12 to set an element to a fixed width(11/12).

  73. Control the margin on bottom side of an element to 0.5rem using the mb-2 utilities.

  74. Control the text color of an element to black using the text-black utilities.

  75. Control the text color of an element to grey-light using the text-grey-light utilities.

  76. Control the horizontal margin of an element to 0.25rem using the mx-1 utilities.

  77. Control the text color of an element to lg using the text-lg utilities.

  78. Control the margin on bottom side of an element to 0.25rem using the mb-1 utilities.

  79. Control the padding on all sides of an element to 0.25rem using the p-1 utilities.

  80. Control the margin on bottom side of an element to 1rem using the mb-4 utilities.

  81. Control the padding on all sides of an element to 0.75rem using the p-3 utilities.

  82. Control the margin on all sides of an element to -0.75rem using the -m-3 utilities.

  83. Control the background color of an element to no-repeat using the bg-no-repeat utilities.

  84. Control the background color of an element to 100% using the bg-100% utilities.

  85. Use h-16 to set an element to a fixed height(4rem).

  86. Control the margin on top side of an element to 1.5rem using the mt-6 utilities.

  87. Control the horizontal padding of an element to 1rem using the px-4 utilities.

  88. Use h-6 to set an element to a fixed height(1.5rem).

  89. Control the text color of an element to orange using the text-orange utilities.

  90. Control the text color of an element to black-alt using the text-black-alt utilities.

  91. Control the margin on left side of an element to auto using the ml-auto utilities.

  92. Control the background color of an element to orange using the bg-orange utilities.

  93. Control the padding on bottom side of an element to 1rem using the pb-4 utilities.

  94. Control the horizontal padding of an element to 0.75rem using the px-3 utilities.

  95. Use w-8 to set an element to a fixed width(2rem).

  96. Use inline utilities to put the element on its own line and fill its parent.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to create a Reddit Clone components, learn and follow along to implement your own components.