Skip to content

Instantly share code, notes, and snippets.

@FeMaffezzolli

FeMaffezzolli/index.html

Created November 23, 2022 11:57
Show Gist options
  • Save FeMaffezzolli/e514c4ebd702c175acfd3ef7aeab267c to your computer and use it in GitHub Desktop.
Save FeMaffezzolli/e514c4ebd702c175acfd3ef7aeab267c to your computer and use it in GitHub Desktop.
Download ZIP
Lo-fi Chat - with Tailwind CSS
Raw
index.html
<body class="flex flex-col items-center justify-center w-screen min-h-screen bg-gray-100 text-gray-800 p-10">
<!-- Component Start -->
<div class="flex flex-col flex-grow w-full max-w-xl bg-white shadow-xl rounded-lg overflow-hidden">
<div class="flex flex-col flex-grow h-0 p-4 overflow-auto">
<div class="flex w-full mt-2 space-x-3 max-w-xs">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300"></div>
<div>
<div class="bg-gray-300 p-3 rounded-r-lg rounded-bl-lg">
<p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<span class="text-xs text-gray-500 leading-none">2 min ago</span>
</div>
</div>
<div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end">
<div>
<div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg">
<p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
<span class="text-xs text-gray-500 leading-none">2 min ago</span>
</div>
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300"></div>
</div>
<div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end">
<div>
<div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg">
<p class="text-sm">Lorem ipsum dolor sit amet.</p>
</div>
<span class="text-xs text-gray-500 leading-none">2 min ago</span>
</div>
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300"></div>
</div>
<div class="flex w-full mt-2 space-x-3 max-w-xs">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300"></div>
<div>
<div class="bg-gray-300 p-3 rounded-r-lg rounded-bl-lg">
<p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<span class="text-xs text-gray-500 leading-none">2 min ago</span>
</div>
</div>
<div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end">
<div>
<div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg">
<p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<span class="text-xs text-gray-500 leading-none">2 min ago</span>
</div>
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300"></div>
</div>
<div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end">
<div>
<div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg">
<p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
<span class="text-xs text-gray-500 leading-none">2 min ago</span>
</div>
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300"></div>
</div>
<div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end">
<div>
<div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg">
<p class="text-sm">Lorem ipsum dolor sit amet.</p>
</div>
<span class="text-xs text-gray-500 leading-none">2 min ago</span>
</div>
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300"></div>
</div>
<div class="flex w-full mt-2 space-x-3 max-w-xs">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300"></div>
<div>
<div class="bg-gray-300 p-3 rounded-r-lg rounded-bl-lg">
<p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<span class="text-xs text-gray-500 leading-none">2 min ago</span>
</div>
</div>
<div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end">
<div>
<div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg">
<p class="text-sm">Lorem ipsum dolor sit.</p>
</div>
<span class="text-xs text-gray-500 leading-none">2 min ago</span>
</div>
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300"></div>
</div>
</div>
<div class="bg-gray-300 p-4">
<input class="flex items-center h-10 w-full rounded px-3 text-sm" type="text" placeholder="Type your message…">
</div>
</div>
<!-- Component End -->
</body>
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.10/tailwind.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment