Skip to content

Instantly share code, notes, and snippets.

@itznur07

itznur07/index.html

Created December 22, 2022 02:05
Show Gist options
  • Save itznur07/2ba32f6e2ea1d9ec653314b37fd734cc to your computer and use it in GitHub Desktop.
Save itznur07/2ba32f6e2ea1d9ec653314b37fd734cc to your computer and use it in GitHub Desktop.
Download ZIP
Twitter sidebar with tailwindcss
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind</title>
</head>
<body>
<div class="sidebar mt-4 ml-8">
<!-- Icon and title -->
<div class="flex cursor-pointer items-center space-x-4">
<img class="w-10 h-10" src="https://cdn-icons-png.flaticon.com/128/733/733579.png" alt="logo">
<h2 class="font-bold text-xl">Twitter</h2>
</div>
<!-- Icon and title -->
<!-- Content sidebar -->
<div class="slidebar-content mt-8">
<!-- HomeIcon and title -->
<div class="flex cursor-pointer items-center space-x-6 hover:bg-gray-200 p-4 w-36 = rounded-full">
<img class="w-7 h-7" src="https://cdn-icons-png.flaticon.com/128/1946/1946488.png" alt="logo">
<h2 class="text-normal text-xl ">Home</h2>
</div>
<!-- HomeIcon and title -->
<!-- Explore and title -->
<div class="flex cursor-pointer items-center space-x-6 hover:bg-gray-200 p-4 w-36 rounded-full">
<img class="w-7 h-7" src="https://cdn-icons-png.flaticon.com/128/7182/7182095.png" alt="logo">
<h2 class="text-normal text-xl ">Explore</h2>
</div>
<!-- Explore and title -->
<!-- Notifications and title -->
<div class="flex cursor-pointer items-center space-x-6 hover:bg-gray-200 p-4 w-48 rounded-full">
<img class="w-7 h-7" src="https://cdn-icons-png.flaticon.com/128/8023/8023573.png" alt="logo">
<h2 class="text-normal text-xl ">Notifications</h2>
</div>
<!-- Notifications and title -->
<!-- Message and title -->
<div class="flex items-center space-x-6 hover:bg-gray-200 cursor-pointer p-4 w-44 rounded-full">
<img class="w-7 h-7" src="https://cdn-icons-png.flaticon.com/128/542/542638.png" alt="logo">
<h2 class="text-normal text-xl ">Message</h2>
</div>
<!-- Message and title -->
<!-- Bookmark and title -->
<div class="flex items-center space-x-6 hover:bg-gray-200 cursor-pointer p-4 w-48 rounded-full">
<img class="w-7 h-7" src="https://cdn-icons-png.flaticon.com/128/2956/2956783.png" alt="logo">
<h2 class="text-normal text-xl ">Bookmarks</h2>
</div>
<!-- Bookmark and title -->
<!-- Lists and title -->
<div class="flex items-center space-x-6 hover:bg-gray-200 cursor-pointer p-4 w-36 rounded-full">
<img class="w-7 h-7" src="https://cdn-icons-png.flaticon.com/128/2040/2040523.png" alt="logo">
<h2 class="text-normal text-xl ">Lists</h2>
</div>
<!-- Lists and title -->
<!-- Profile and title -->
<div class="flex items-center space-x-6 hover:bg-gray-200 cursor-pointer p-4 w-36 rounded-full">
<img class="w-7 h-7" src="https://cdn-icons-png.flaticon.com/128/456/456283.png" alt="logo">
<h2 class="text-normal text-xl ">Profile</h2>
</div>
<!-- Profile and title -->
<!-- More and title -->
<div class="flex items-center space-x-6 hover:bg-gray-200 cursor-pointer p-4 w-36 rounded-full">
<img class="w-7 h-7" src="https://cdn-icons-png.flaticon.com/128/3018/3018442.png" alt="logo">
<h2 class="text-normal text-xl ">More</h2>
</div>
<!-- More and title -->
<!-- Create Tweet -->
<div class="w-52 cursor-pointer py-2 px-0 bg-blue-500 mt-4 rounded-full">
<h2 class="font-bold text-white text-xl text-center">Tweet</h2>
</div>
<!-- Create Tweet -->
<!-- User Card -->
<div class="flex items-center max-w-sm hover:bg-gray-200 justify-between px-4 py-4 rounded-full mt-28">
<div class="flex space-x-4 cursor-pointer"><img class="w-12 h-12 space-x-6" src="https://cdn-icons-png.flaticon.com/128/3135/3135768.png" alt="avatar">
<div>
<h3 class="font-bold text-xl">Md Nuruddin</h3>
<p class="text-normal">@itznur07</p>
</div>
</div>
<div>
<img class="w-8 h-8 cursor-pointer" src="https://cdn-icons-png.flaticon.com/128/3018/3018442.png" alt="icon">
</div>
</div>
<!-- User Card -->
</div>
<!-- content sidebar -->
</div>
</body>
</html>
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment