mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-24 14:37:02 +00:00
1045 lines
52 KiB
HTML
1045 lines
52 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<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">
|
|
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
|
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
|
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
|
<title>Other </title>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
|
d
|
|
</button>
|
|
|
|
|
|
<!-- other 1 start -->
|
|
<section class="section_divider">
|
|
<div>Other 1 (alert 1)</div>
|
|
</section>
|
|
|
|
<!-- alert 1 -->
|
|
<div class="flex items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-xl mx-auto max-w-sm relative m-10">
|
|
<span class="text-xs font-bold uppercase px-2 mt-2 mr-2 text-green-900 bg-green-400 border rounded-full absolute top-0 right-0">New</span>
|
|
<span class="text-xs font-semibold uppercase m-1 py-1 mr-3 text-gray-500 absolute bottom-0 right-0">4:36 PM</span>
|
|
|
|
<img class="h-12 w-12 rounded-full" alt="John Doe's avatar"
|
|
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&faces=1&faceindex=1&facepad=2.5&w=500&h=500&q=80" />
|
|
|
|
<div class="ml-5">
|
|
<h4 class="text-lg font-semibold leading-tight text-gray-900 dark:text-gray-300">John Doe</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">You have a new message!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- alert 1 -->
|
|
<!-- other 1 end -->
|
|
|
|
|
|
|
|
<!-- other 2 start -->
|
|
<section class="section_divider">
|
|
<div>Other 2 (alert 2)</div>
|
|
</section>
|
|
<!-- alert 2 -->
|
|
<div class="flex flex-col justify-center pt-4 min-w-screen">
|
|
<div class="w-full px-2 py-4 overflow-x-auto text-center whitespace-no-wrap rounded-md" role="alert">
|
|
<div
|
|
class="relative inline-flex w-full max-w-sm ml-3 overflow-hidden bg-green-500 rounded shadow-sm hover:bg-green-600 hover:shadow-lg">
|
|
<div class="flex items-center justify-center w-12">
|
|
<svg class="w-10 h-10 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<div class="px-3 py-2 text-left">
|
|
<span class="font-semibold text-white">Success</span>
|
|
<p class="mb-1 text-sm leading-none text-white">Successfully Done!</p>
|
|
</div>
|
|
<div class="absolute right-0 p-1">
|
|
<svg class="w-6 h-6 text-white fill-current" role="button" xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20">
|
|
<title>Close</title>
|
|
<path
|
|
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full px-2 py-4 overflow-x-auto text-center whitespace-no-wrap rounded-md" role="alert">
|
|
<div
|
|
class="relative inline-flex w-full max-w-sm ml-3 overflow-hidden bg-blue-500 rounded shadow-sm hover:bg-blue-600 hover:shadow-lg">
|
|
<div class="flex items-center justify-center w-12">
|
|
<svg class="w-10 h-10 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div class="px-4 py-2 text-left">
|
|
<span class="font-semibold text-white">Info</span>
|
|
<p class="mb-1 text-sm leading-none text-white">You should read this.</p>
|
|
</div>
|
|
<div class="absolute right-0 p-1">
|
|
<svg class="w-6 h-6 text-white fill-current" role="button" xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20">
|
|
<title>Close</title>
|
|
<path
|
|
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full px-2 py-4 overflow-x-auto text-center whitespace-no-wrap rounded-md" role="alert">
|
|
<div
|
|
class="relative inline-flex w-full max-w-sm ml-3 overflow-hidden bg-yellow-500 rounded shadow-sm hover:shadow-lg hover:bg-yellow-600">
|
|
<div class="flex items-center justify-center w-12">
|
|
<svg class="w-10 h-10 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</div>
|
|
<div class="px-4 py-2 text-left">
|
|
<span class="font-semibold text-white">Warning</span>
|
|
<p class="mb-1 text-sm leading-none text-white">Something could go wrong.</p>
|
|
</div>
|
|
<div class="absolute right-0 p-1">
|
|
<svg class="w-6 h-6 text-white fill-current" role="button" xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20">
|
|
<title>Close</title>
|
|
<path
|
|
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full px-2 py-4 overflow-x-auto text-center whitespace-no-wrap rounded-md" role="alert">
|
|
<div
|
|
class="relative inline-flex w-full max-w-sm ml-3 overflow-hidden bg-red-500 rounded shadow-sm hover:shadow-lg hover:bg-red-600">
|
|
<div class="flex items-center justify-center w-12">
|
|
<svg class="w-10 h-10 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div class="px-4 py-2 text-left">
|
|
<span class="font-semibold text-white">Error</span>
|
|
<p class="mb-1 text-sm leading-none text-white">Something went wrong.</p>
|
|
</div>
|
|
<div class="absolute right-0 p-1">
|
|
<svg class="w-6 h-6 text-white fill-current" role="button" xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20">
|
|
<title>Close</title>
|
|
<path
|
|
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- alert 2 -->
|
|
<!-- other 2 end -->
|
|
|
|
<!-- other 3 start -->
|
|
<section class="section_divider">
|
|
<div>Other 3 (alert 3)</div>
|
|
</section>
|
|
<!-- alert 3 -->
|
|
<div class="flex flex-col justify-center pt-4 bg-gray-100 min-w-screen">
|
|
|
|
<!-- success -->
|
|
<div class="flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<div class="flex items-center justify-center w-12 bg-emerald-500">
|
|
<svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="px-4 py-2 -mx-3">
|
|
<div class="mx-3">
|
|
<span class="font-semibold text-emerald-500 dark:text-emerald-400">Success</span>
|
|
<p class="text-sm text-gray-600 dark:text-gray-200">Your account was registered!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- info -->
|
|
<div class="my-5"></div>
|
|
<div class="flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<div class="flex items-center justify-center w-12 bg-blue-500">
|
|
<svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="px-4 py-2 -mx-3">
|
|
<div class="mx-3">
|
|
<span class="font-semibold text-blue-500 dark:text-blue-400">Info</span>
|
|
<p class="text-sm text-gray-600 dark:text-gray-200">This channel archived by the owner!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- warning -->
|
|
<div class="my-5"></div>
|
|
|
|
<div class="flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<div class="flex items-center justify-center w-12 bg-yellow-400">
|
|
<svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="px-4 py-2 -mx-3">
|
|
<div class="mx-3">
|
|
<span class="font-semibold text-yellow-400 dark:text-yellow-300">Warning</span>
|
|
<p class="text-sm text-gray-600 dark:text-gray-200">Your image size is too large!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- error -->
|
|
<div class="my-5"></div>
|
|
|
|
<div class="flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<div class="flex items-center justify-center w-12 bg-red-500">
|
|
<svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="px-4 py-2 -mx-3">
|
|
<div class="mx-3">
|
|
<span class="font-semibold text-red-500 dark:text-red-400">Error</span>
|
|
<p class="text-sm text-gray-600 dark:text-gray-200">Your email is already used!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- notification pop -->
|
|
<div class="my-5"></div>
|
|
|
|
<div class="flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<div class="w-2 bg-gray-800 dark:bg-gray-900"></div>
|
|
|
|
<div class="flex items-center px-2 py-3">
|
|
<img class="object-cover w-10 h-10 rounded-full" alt="User avatar" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=200">
|
|
|
|
<div class="mx-3">
|
|
<p class="text-gray-600 dark:text-gray-200">Sara has replied on the <a class="text-blue-500 dark:text-blue-300 hover:text-blue-400 hover:underline">uploaded image</a>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="my-5"></div>
|
|
|
|
|
|
</div>
|
|
|
|
<!-- alert 3 -->
|
|
<!-- other 3 end -->
|
|
|
|
<!-- other 4 start -->
|
|
<section class="section_divider">
|
|
<div>Other 4 (alert 4)</div>
|
|
</section>
|
|
<!-- alert 4 -->
|
|
|
|
<div class="w-64 mx-auto m-2 flex items-center justify-center p-4 text-white bg-green-600 rounded" role="alert">
|
|
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
|
|
<h3 class="ml-3 text-sm font-medium">
|
|
Post has been published!
|
|
</h3>
|
|
</div>
|
|
|
|
<!-- Light -->
|
|
|
|
<div class="w-64 mx-auto flex items-center justify-center p-4 text-green-700 rounded bg-green-50" role="alert">
|
|
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
|
|
<h3 class="ml-3 text-sm font-medium">
|
|
Post has been published!
|
|
</h3>
|
|
</div>
|
|
|
|
<!-- Border -->
|
|
|
|
<div class="w-64 mx-auto m-2 flex items-center justify-center p-4 text-green-700 border-2 border-current rounded" role="alert">
|
|
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
|
|
<h3 class="ml-3 text-sm font-medium">
|
|
Post has been published!
|
|
</h3>
|
|
</div>
|
|
|
|
<!-- alert 4 -->
|
|
<!-- other 4 end -->
|
|
|
|
<!-- other 5 start -->
|
|
<section class="section_divider">
|
|
<div>Other 5 (alert 5)</div>
|
|
</section>
|
|
<!-- alert 5 -->
|
|
<div class="flex flex-wrap items-center justify-center my-10">
|
|
<div class="flex space-x-10 w-full flex-wrap items-center justify-center">
|
|
|
|
<!-- Component Start -->
|
|
<div class="flex items-center h-16 border border-gray-300 pr-4 w-full max-w-md shadow-lg">
|
|
<div class="flex items-center justify-center bg-gray-300 w-12 h-full">
|
|
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div class="px-6">
|
|
<h5 class="font-semibold">Hey heads up!</h5>
|
|
<p class="text-sm">You should notice this alert!</p>
|
|
</div>
|
|
<button class="ml-auto">
|
|
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<!-- Component End -->
|
|
|
|
<!-- Component Start -->
|
|
<div class="flex items-center h-16 border border-gray-300 pr-4 w-full max-w-md shadow-lg">
|
|
<div class="flex items-center justify-center bg-gray-300 w-2 h-full">
|
|
</div>
|
|
<div class="px-6">
|
|
<h5 class="font-semibold">Hey heads up!</h5>
|
|
<p class="text-sm">You should notice this alert!</p>
|
|
</div>
|
|
<button class="ml-auto">
|
|
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<!-- Component End -->
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!-- alert 5 -->
|
|
<!-- other 5 end -->
|
|
|
|
<!-- other 6 start -->
|
|
<section class="section_divider">
|
|
<div>Ohter 6 (alert 6 )</div>
|
|
</section>
|
|
<!-- alert 6 -->
|
|
<section class="flex justify-center my-10">
|
|
|
|
<div class=" flex items-between justify-center p-6 border-l-8 sm:py-8 dark:border-green-400 dark:bg-gray-900 dark:text-gray-100">
|
|
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus?</span>
|
|
</div>
|
|
|
|
</section>
|
|
<!-- alert 6 -->
|
|
<!-- other 6 end -->
|
|
|
|
<!-- other 7 start -->
|
|
<section class="section_divider">
|
|
<div> Other 7 (notification 1)</div>
|
|
</section>
|
|
<!-- notification 1 -->
|
|
<div class="flex flex-col justify-center pt-4 bg-gray-100 min-w-screen">
|
|
<div class="w-full max-w-sm mx-auto my-2 overflow-hidden rounded shadow-sm">
|
|
<div class="relative flex items-center justify-between px-2 py-2 font-bold text-white bg-green-500 rounded-t">
|
|
<div class="relative flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
|
|
class="inline w-6 h-6 mr-2 opacity-75">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span>Success</span>
|
|
</div>
|
|
<span class="relative">
|
|
<svg class="w-5 h-5 text-green-300 fill-current hover:text-white" role="button"
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
|
<title>Close</title>
|
|
<path
|
|
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="p-3 bg-white border border-gray-300 rounded-b shadow-lg">
|
|
<span class="block text-gray-600">File uploaded successfully!</span>
|
|
</div>
|
|
</div>
|
|
<div class="w-full max-w-sm mx-auto my-2 overflow-hidden rounded shadow-sm">
|
|
<div class="relative flex items-center justify-between px-2 py-2 font-bold text-white bg-blue-500">
|
|
<div class="relative flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
|
|
class="inline w-6 h-6 mr-2 opacity-75">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
|
|
</svg>
|
|
<span>New message</span>
|
|
</div>
|
|
|
|
<span class="relative">
|
|
<svg class="w-5 h-5 text-blue-300 fill-current hover:text-white" role="button"
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
|
<title>Close</title>
|
|
<path
|
|
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="p-3 bg-white border border-gray-300 rounded-b">
|
|
<div class="flex justify-start mb-2">
|
|
<div>
|
|
<img src="https://images.unsplash.com/photo-1541647376583-8934aaf3448a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&faces=1&faceindex=1&facepad=2.5&w=500&h=500&q=80"
|
|
class="inline object-cover w-12 h-12 mr-2 rounded-full">
|
|
</div>
|
|
<div>
|
|
<p class="font-medium leading-tight text-gray-700">John Doe</p>
|
|
<span class="block leading-tight text-gray-500">Hey! hope you are doing fine.</span>
|
|
</div>
|
|
</div>
|
|
<div class="block w-full mt-3 text-right">
|
|
<button
|
|
class="px-4 py-2 font-semibold text-gray-800 bg-white border border-gray-400 rounded-md hover:bg-gray-100 focus:outline-none">
|
|
Ignore
|
|
</button>
|
|
<button
|
|
class="px-4 py-2 font-bold text-white bg-blue-500 rounded-md hover:bg-blue-700 focus:outline-none">
|
|
Reply
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full max-w-sm mx-auto my-2 overflow-hidden rounded shadow-sm">
|
|
<div class="relative flex items-center justify-between px-2 py-2 font-bold text-white bg-yellow-500">
|
|
<div class="relative flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
|
|
class="inline w-6 h-6 mr-2 opacity-75">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span>Deleting File</span>
|
|
</div>
|
|
<span class="relative">
|
|
<svg class="w-5 h-5 text-yellow-300 fill-current hover:text-white" role="button"
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
|
<title>Close</title>
|
|
<path
|
|
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="p-3 bg-white border border-gray-300 rounded-b shadow-lg">
|
|
<p class="font-bold text-gray-700">Are you sure?</p>
|
|
<p class="mt-2 text-sm text-gray-500">Are you sure you want to delete this file?</p>
|
|
<div class="block w-full mt-3 text-right">
|
|
<button
|
|
class="px-4 py-2 font-semibold text-gray-800 bg-white border border-gray-400 rounded-md hover:bg-gray-100 focus:outline-none">
|
|
Cancel
|
|
</button>
|
|
<button
|
|
class="px-4 py-2 font-bold text-white bg-yellow-500 rounded-md hover:bg-yellow-700 focus:outline-none">
|
|
Confirm
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full max-w-sm mx-auto my-2">
|
|
<div
|
|
class="relative flex items-center justify-between px-4 py-4 font-bold text-gray-700 bg-white border border-gray-300 rounded shadow-sm">
|
|
<div class="relative flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
|
|
class="inline w-6 h-6 mr-2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span>Message archived</span>
|
|
</div>
|
|
<span class="relative">
|
|
<svg class="w-5 h-5 text-gray-400 fill-current hover:text-gray-700" role="button"
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
|
<title>Close</title>
|
|
<path
|
|
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
|
|
</svg>
|
|
</span>
|
|
<button
|
|
class="absolute right-0 mr-16 font-semibold text-blue-400 bg-transparent rounded-full focus:outline-none">
|
|
Undo
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- notification 1 -->
|
|
<!-- other 7 end -->
|
|
|
|
<!-- other 8 start -->
|
|
<section class="section_divider">
|
|
<div>Other 8 (notification 2)</div>
|
|
</section>
|
|
<!-- notification 2 -->
|
|
<section class="my-10 flex justify-center">
|
|
|
|
<div class="inline-flex relative w-fit">
|
|
<div class="absolute inline-block top-0 right-0 bottom-auto left-auto translate-x-2/4 -translate-y-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 py-1 px-2.5 text-xs leading-none text-center whitespace-nowrap align-baseline font-bold bg-indigo-700 text-white rounded-full z-10">99+</div>
|
|
<button type="button" class="inline-block px-7 py-3 bg-blue-600 text-white font-medium text-sm leading-snug uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">E-mails</button>
|
|
</div>
|
|
|
|
</section>
|
|
<!-- notification 2 -->
|
|
<!-- other 8 end -->
|
|
|
|
<!-- other 9 start -->
|
|
<section class="section_divider">
|
|
<div>Other 9 (notification 3)</div>
|
|
</section>
|
|
<!-- notification 3 -->
|
|
<section class="flex justify-center">
|
|
<div class="m-6 inline-flex relative w-fit ">
|
|
<div class="absolute inline-block top-2/4 right-auto bottom-2/4 left-2/4 -translate-x-2/4 -translate-y-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 p-2.5 text-xs bg-pink-700 rounded-full z-10"></div>
|
|
<div class="px-8 py-6 bg-indigo-400 flex items-center justify-center text-center rounded-lg shadow-lg">
|
|
<div>
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bell" class="mx-auto text-white w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
|
<path fill="currentColor" d="M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- notification 3 -->
|
|
<!-- other 9 end -->
|
|
|
|
<!-- other 10 start -->
|
|
<section class="section_divider">
|
|
<div>Other 10 (notification 4)</div>
|
|
</section>
|
|
<!-- notification 4 -->
|
|
|
|
<!-- notificatoin box 1 -->
|
|
<div class="shadow-lg rounded-lg bg-white mx-auto m-8 p-4 w-80 ">
|
|
<div class="text-sm pb-2">
|
|
Notification Title
|
|
<span class="float-right">
|
|
<svg
|
|
class="fill-current text-gray-600"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
width="22"
|
|
height="22"
|
|
>
|
|
<path
|
|
class="heroicon-ui"
|
|
d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="text-sm text-gray-600 tracking-tight ">
|
|
I will never close automatically. This is a purposely very very long
|
|
description that has many many characters and words.
|
|
</div>
|
|
</div>
|
|
<!-- notificatoin box 2 -->
|
|
<div class="shadow-lg rounded-lg bg-white mx-auto m-8 p-4 w-80 flex">
|
|
<div class="pr-2">
|
|
<svg
|
|
class="fill-current text-green-600"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
width="22"
|
|
height="22"
|
|
>
|
|
<path
|
|
class="heroicon-ui"
|
|
d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.54-4.46a1 1 0 0 1 1.42-1.42 3 3 0 0 0 4.24 0 1 1 0 0 1 1.42 1.42 5 5 0 0 1-7.08 0zM9 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-sm pb-2">
|
|
Notification Title
|
|
<span class="float-right">
|
|
<svg
|
|
class="fill-current text-gray-600"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
width="22"
|
|
height="22"
|
|
>
|
|
<path
|
|
class="heroicon-ui"
|
|
d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="text-sm text-gray-600 tracking-tight ">
|
|
I will never close automatically. This is a purposely very very long
|
|
description that has many many characters and words.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- notificatoin box 3 -->
|
|
<div class="shadow-lg rounded-lg bg-white mx-auto m-8 p-4 w-80 flex">
|
|
<div class="pr-2">
|
|
<svg
|
|
class="fill-current text-red-600"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
height="24"
|
|
>
|
|
<path
|
|
class="heroicon-ui"
|
|
d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.54-4.54a5 5 0 0 1 7.08 0 1 1 0 0 1-1.42 1.42 3 3 0 0 0-4.24 0 1 1 0 0 1-1.42-1.42zM9 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-sm pb-2">
|
|
Notification Title
|
|
<span class="float-right">
|
|
<svg
|
|
class="fill-current text-gray-600"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
width="22"
|
|
height="22"
|
|
>
|
|
<path
|
|
class="heroicon-ui"
|
|
d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="text-sm text-gray-600 tracking-tight ">
|
|
I will never close automatically. This is a purposely very very long
|
|
description that has many many characters and words.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- notificatoin box 4 -->
|
|
<div class="shadow-lg rounded-lg bg-white mx-auto m-8 p-4 w-80 flex">
|
|
<div class="pr-2">
|
|
<svg
|
|
class="fill-current text-orange-600"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
height="24"
|
|
>
|
|
<path
|
|
class="heroicon-ui"
|
|
d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 9a1 1 0 0 1-1-1V8a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1zm0 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-sm pb-2">
|
|
Notification Title
|
|
<span class="float-right">
|
|
<svg
|
|
class="fill-current text-gray-600"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
width="22"
|
|
height="22"
|
|
>
|
|
<path
|
|
class="heroicon-ui"
|
|
d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="text-sm text-gray-600 tracking-tight ">
|
|
I will never close automatically. This is a purposely very very long
|
|
description that has many many characters and words.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- notification 4 -->
|
|
<!-- other 10 end -->
|
|
|
|
|
|
<!-- other 11 start -->
|
|
<section class="section_divider">
|
|
<div>Other 11 (notification 5) </div>
|
|
</section>
|
|
<!-- notification 5 -->
|
|
<div class="flex items-center justify-center my-10 bg-gray-100 ">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl border p-8 w-3xl">
|
|
<div class="mb-4">
|
|
<h1 class="font-semibold text-gray-800 dark:text-emerald-200">Friend Requests</h1>
|
|
</div>
|
|
<div class="flex justify-center items-center mb-8">
|
|
<div class="w-1/5">
|
|
<img class="w-12 h-12 rounded-full border border-gray-100 shadow-sm" src="https://randomuser.me/api/portraits/men/20.jpg" alt="user image" />
|
|
</div>
|
|
<div class="w-4/5">
|
|
<div>
|
|
<span class="font-semibold text-gray-800 dark:text-emerald-400">Ezio Dani</span>
|
|
<span class="text-gray-400">wants to be your friend</span>
|
|
</div>
|
|
<div class="font-semibold">
|
|
<a href="" class="text-blue-600 mr-2">Accept</a>
|
|
<a href="" class="text-gray-400">Decline</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center items-center">
|
|
<div class="w-1/5">
|
|
<img class="w-12 h-12 rounded-full border border-gray-100 shadow-sm" src="https://randomuser.me/api/portraits/women/20.jpg" alt="user image" />
|
|
</div>
|
|
<div class="w-4/5">
|
|
<div>
|
|
<span class="font-semibold text-gray-800 dark:text-emerald-400">Bianca Chen</span>
|
|
<span class="text-gray-400">wants to be your friend</span>
|
|
</div>
|
|
<div class="font-semibold">
|
|
<a href="" class="text-blue-600 mr-2">Accept</a>
|
|
<a href="" class="text-gray-400">Decline</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- notification 5 -->
|
|
<!-- other 11 end -->
|
|
|
|
<!-- other 12 start -->
|
|
<section class="section_divider">
|
|
<div>Other 12 (ribbon at corner 1)</div>
|
|
</section>
|
|
<!-- ribbon 1 -->
|
|
<div class="relative overflow-hidden mx-auto my-10 w-56 h-56 bg-white border-2 dark:border-emerald-400 border-black">
|
|
<div class="absolute left-0 top-0 h-16 w-16">
|
|
<div
|
|
class="absolute transform -rotate-45 bg-gray-600 text-center text-white font-semibold py-1 left-[-34px] top-[32px] w-[170px]">
|
|
Popular
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ribbon 1 -->
|
|
<!-- other 12 end -->
|
|
|
|
|
|
|
|
<!-- other 13 star -->
|
|
<section class="section_divider">
|
|
<div>Other 13 (avatar 1)</div>
|
|
</section>
|
|
|
|
<!-- avatar 1 -->
|
|
<div class="relative w-12 mx-auto my-10">
|
|
<img class="rounded-full ring-2 ring-gray-100 w-12 h-12" src="https://source.unsplash.com/random/100*100/?employee" />
|
|
<div
|
|
class="absolute bottom-0 right-0 h-3 w-3 rounded-full ring ring-white bg-green-600"
|
|
></div>
|
|
</div>
|
|
<!-- avatar 1 -->
|
|
|
|
<!-- other 13 end -->
|
|
|
|
|
|
<!-- other 14 start -->
|
|
<section class="section_divider">
|
|
<div>Other 14 (avater 2)</div>
|
|
</section>
|
|
|
|
<!-- avater 2 -->
|
|
<div class="flex -space-x-4 justify-center my-10">
|
|
<img
|
|
class="rounded-full ring ring-white w-12 h-12"
|
|
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
/>
|
|
<img
|
|
class="rounded-full ring ring-white w-12 h-12"
|
|
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
/>
|
|
<img
|
|
class="rounded-full ring ring-white w-12 h-12"
|
|
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
|
|
/>
|
|
<img
|
|
class="rounded-full ring ring-white w-12 h-12"
|
|
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
/>
|
|
<div
|
|
class="flex items-center justify-center rounded-full ring ring-white w-12 h-12 bg-gray-300 font-semibold text-white"
|
|
>
|
|
+5
|
|
</div>
|
|
</div>
|
|
|
|
<!-- avater 2 -->
|
|
|
|
<!-- other 14 end -->
|
|
|
|
<!-- other 15 star -->
|
|
<section class="section_divider">
|
|
<div>Other 15 (breadcrumb 1 )</div>
|
|
</section>
|
|
<!-- breadcrumb 1 -->
|
|
|
|
<div class=" my-10 dark:bg-gray-800 flex justify-center items-center py-4 overflow-y-auto whitespace-nowrap">
|
|
<a href="#" class="text-gray-600 dark:text-gray-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
|
|
</svg>
|
|
</a>
|
|
|
|
<span class="mx-5 text-gray-500 dark:text-gray-300">
|
|
/
|
|
</span>
|
|
|
|
<a href="#" class="text-gray-600 dark:text-gray-200 hover:underline">
|
|
Account
|
|
</a>
|
|
|
|
<span class="mx-5 text-gray-500 dark:text-gray-300">
|
|
/
|
|
</span>
|
|
|
|
<a href="#" class="text-gray-600 dark:text-gray-200 hover:underline">
|
|
Profile
|
|
</a>
|
|
|
|
<span class="mx-5 text-gray-500 dark:text-gray-300">
|
|
/
|
|
</span>
|
|
|
|
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">
|
|
Settings
|
|
</a>
|
|
</div>
|
|
|
|
<!-- breadcrumb 1 -->
|
|
<!-- other 15 end -->
|
|
|
|
<!-- other 16 start -->
|
|
<section class="section_divider">
|
|
<div>Other 16 (breadcrumb 2)</div>
|
|
</section>
|
|
|
|
<!-- breadcrumb 2 -->
|
|
<div class=" my-10 dark:bg-gray-800 flex justify-center items-center py-4 overflow-y-auto whitespace-nowrap">
|
|
<a href="#" class="text-gray-600 dark:text-gray-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
|
|
</svg>
|
|
</a>
|
|
|
|
<span class="mx-5 text-gray-500 dark:text-gray-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</span>
|
|
|
|
<a href="#" class="text-gray-600 dark:text-gray-200 hover:underline">
|
|
Account
|
|
</a>
|
|
|
|
<span class="mx-5 text-gray-500 dark:text-gray-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</span>
|
|
|
|
<a href="#" class="text-gray-600 dark:text-gray-200 hover:underline">
|
|
Profile
|
|
</a>
|
|
|
|
<span class="mx-5 text-gray-500 dark:text-gray-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</span>
|
|
|
|
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">
|
|
Settings
|
|
</a>
|
|
</div>
|
|
|
|
<!-- breadcrumb 2 -->
|
|
<!-- other 16 end -->
|
|
|
|
|
|
<!-- other 17 start -->
|
|
<section class="section_divider">
|
|
<div>Other 17 ( newsletter )</div>
|
|
</section>
|
|
|
|
<section class=" my-10 flex flex-col max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800 md:flex-row md:h-48">
|
|
<div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700 md:dark:bg-gray-800">
|
|
<div class="px-6 py-6 md:px-8 md:py-0">
|
|
<h2 class="text-lg font-bold text-gray-700 dark:text-white md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
|
|
|
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400 md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2">
|
|
<form>
|
|
<div class="flex flex-col p-1 overflow-hidden border rounded-lg dark:border-gray-600 lg:flex-row dark:focus-within:border-blue-300 focus-within:ring focus-within:ring-opacity-40 focus-within:border-blue-400 focus-within:ring-blue-300">
|
|
<input class="px-6 py-2 text-gray-700 placeholder-gray-500 bg-white outline-none dark:bg-gray-800 dark:placeholder-gray-400 focus:placeholder-transparent dark:focus:placeholder-transparent" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
|
|
|
|
<button class="px-4 py-3 text-sm font-medium tracking-wider text-gray-100 uppercase transition-colors duration-200 transform bg-gray-700 rounded-lg hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- other 17 end -->
|
|
|
|
<!-- other 18 start -->
|
|
<section class="section_divider">
|
|
<div>Other 18 (pagination 1 with arrow's)</div>
|
|
</section>
|
|
|
|
<div class="flex justify-center my-10">
|
|
<a href="#" class="flex items-center justify-center px-4 py-2 mx-1 text-gray-500 capitalize bg-white rounded-md cursor-not-allowed dark:bg-gray-900 dark:text-gray-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</a>
|
|
|
|
<a href="#" class="hidden px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md sm:inline dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-500 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
|
|
1
|
|
</a>
|
|
|
|
<a href="#" class="hidden px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md sm:inline dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-500 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
|
|
2
|
|
</a>
|
|
|
|
<a href="#" class="hidden px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md sm:inline dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-500 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
|
|
...
|
|
</a>
|
|
|
|
<a href="#" class="hidden px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md sm:inline dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-500 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
|
|
9
|
|
</a>
|
|
|
|
<a href="#" class="hidden px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md sm:inline dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-500 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
|
|
10
|
|
</a>
|
|
|
|
<a href="#" class="flex items-center justify-center px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-500 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- other 18 end -->
|
|
|
|
<!-- other 19 start -->
|
|
<section class="section_divider">
|
|
<div>other 19 (pagination 2 )</div>
|
|
</section>
|
|
|
|
<!-- pagination 2 -->
|
|
<div class="flex justify-center my-10">
|
|
<a href="#" class="flex items-center px-4 py-2 mx-1 text-gray-500 bg-white rounded-md cursor-not-allowed dark:bg-gray-900 dark:text-gray-600">
|
|
previous
|
|
</a>
|
|
|
|
<a href="#" class="items-center hidden px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md sm:flex dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
|
|
1
|
|
</a>
|
|
|
|
<a href="#" class="items-center hidden px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md sm:flex dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
|
|
2
|
|
</a>
|
|
|
|
<a href="#" class="items-center hidden px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md sm:flex dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
|
|
3
|
|
</a>
|
|
|
|
<a href="#" class="flex items-center px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
|
|
Next
|
|
</a>
|
|
</div>
|
|
<!-- pagination 2 -->
|
|
<!-- other 19 end -->
|
|
|
|
<!-- other 20 start -->
|
|
<section class="section_divider">
|
|
<div>Other 20 (pagination 3 with record's )</div>
|
|
</section>
|
|
|
|
<!-- pagination 3 -->
|
|
<div class="w-full bg-white dark:bg-gray-800">
|
|
<div class="container flex flex-col items-center px-6 py-5 mx-auto space-y-6 sm:flex-row sm:justify-between sm:space-y-0 ">
|
|
<div class="-mx-2">
|
|
<a href="#" class="inline-flex items-center justify-center px-4 py-1 mx-2 text-gray-700 transition-colors duration-200 transform bg-gray-100 rounded-lg dark:text-white dark:bg-gray-700">
|
|
1
|
|
</a>
|
|
|
|
<a href="#" class="inline-flex items-center justify-center px-4 py-1 mx-2 text-gray-700 transition-colors duration-200 transform rounded-lg hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
|
|
2
|
|
</a>
|
|
|
|
<a href="#" class="inline-flex items-center justify-center px-4 py-1 mx-2 text-gray-700 transition-colors duration-200 transform rounded-lg hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
|
|
3
|
|
</a>
|
|
</div>
|
|
|
|
<div class="text-gray-500 dark:text-gray-400">
|
|
<span class="font-medium text-gray-700 dark:text-gray-100">1 - 25</span> of 77 records
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- pagination 3 -->
|
|
<!-- other 20 end -->
|
|
|
|
|
|
<!-- start of script section -->
|
|
<script type="text/javascript">
|
|
let toogler = document.getElementById("dark_mood_toogler");
|
|
let doc_html_el = document.getElementsByTagName('html')[0];
|
|
|
|
doc_html_el.addEventListener('keyup',(e)=>{
|
|
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
|
if(e.ctrlKey && e.keyCode =='220'){
|
|
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
|
|
|
}
|
|
})
|
|
doc_html_el.addEventListener('keyup',(e)=>{
|
|
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
|
if(e.ctrlKey && e.keyCode =='191'){
|
|
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
|
|
|
}
|
|
})
|
|
toogler.addEventListener('click',()=>{
|
|
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
|
console.log(doc_html_el.className);
|
|
})
|
|
</script>
|
|
<!-- end of script section -->
|
|
|
|
</body>
|
|
</html> |