112 lines
8.5 KiB
HTML
112 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<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" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<title>Interactivity</title>
|
|
</head>
|
|
<body>
|
|
<!-- Hover State Styling -->
|
|
<button class="bg-black text-white py-3 px-5 rounded-lg hover:bg-orange-500 hover:text-black">click</button>
|
|
|
|
<!-- Focus State Styling -->
|
|
<button class="bg-black text-white py-3 px-5 rounded-lg focus:bg-green-500 focus:text-black">click</button>
|
|
|
|
<!-- Active State Styling -->
|
|
<button class="bg-black text-white py-3 px-5 rounded-lg active:bg-yellow-500 active:text-black">click</button>
|
|
|
|
<!-- Styling based on parent state -->
|
|
<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white shadow space-y-3 hover:bg-sky-500">
|
|
<h3 class="group-hover:text-white">Cart Title</h3>
|
|
<p class="group-hover:text-white">Lorem, ipsum dolor.</p>
|
|
</a>
|
|
|
|
<!-- Pseudo Classes -->
|
|
<ul>
|
|
<li class="first:bg-red-200">Item1</li>
|
|
<li class="first:bg-red-200">Item2</li>
|
|
<li class="first:bg-red-200">Item3</li>
|
|
<li class="first:bg-red-200">Item4</li>
|
|
<li class="first:bg-red-200">Item5</li>
|
|
<li class="first:bg-red-200">Item6</li>
|
|
</ul>
|
|
|
|
<ul>
|
|
<li class="first:bg-red-200 even:bg-gray-400 odd:bg-orange-400">Item1</li>
|
|
<li class="first:bg-red-200 even:bg-gray-400 odd:bg-orange-400">Item2</li>
|
|
<li class="first:bg-red-200 even:bg-gray-400 odd:bg-orange-400">Item3</li>
|
|
<li class="first:bg-red-200 even:bg-gray-400 odd:bg-orange-400">Item4</li>
|
|
<li class="first:bg-red-200 even:bg-gray-400 odd:bg-orange-400">Item5</li>
|
|
<li class="first:bg-red-200 even:bg-gray-400 odd:bg-orange-400">Item6</li>
|
|
</ul>
|
|
|
|
<!-- Appearance -->
|
|
<!-- Use appearance-none to reset any browser specific styling on an element. This utility is often used when creating custom form components. -->
|
|
<select name="" id="1" class="appearance-none">
|
|
<option value="Yes">Yes</option>
|
|
<option value="No">No</option>
|
|
</select>
|
|
|
|
<br>
|
|
|
|
<!-- Cursor -->
|
|
<button class="bg-black text-white py-3 px-5 rounded-lg m-3 cursor-wait">Submit</button>
|
|
<button class="bg-black text-white py-3 px-5 rounded-lg m-3 cursor-not-allowed">Submit</button>
|
|
<p class="cursor-pointer">Hello</p>
|
|
|
|
<!-- Resize -->
|
|
|
|
<!-- User Select -->
|
|
<div class="select-none">Lorem ipsum dolor sit amet.</div>
|
|
<div class="select-text">Lorem ipsum dolor sit amet.</div>
|
|
<div class="select-all">Lorem ipsum dolor sit amet.</div>
|
|
<div class="select-auto">Lorem ipsum dolor sit amet.</div>
|
|
|
|
<a href="#item" class="block my-6">goto hello</a>
|
|
<!-- Smooth Scroll Example -->
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At corrupti hic unde minima dignissimos asperiores quibusdam porro assumenda voluptatibus laborum, beatae, veritatis, ab tempora exercitationem earum nihil molestias amet neque fugit corporis? Rerum placeat eos optio fuga! Cupiditate recusandae suscipit odio corrupti tempore ipsum, enim quos inventore perspiciatis accusamus expedita pariatur amet consequuntur ut adipisci accusantium iste quas. Minus a laudantium numquam unde eligendi nam corrupti nulla doloribus distinctio, illo totam soluta accusantium repudiandae quam beatae modi? Neque tempore maiores ullam corrupti impedit corporis consectetur. Cupiditate eaque magnam totam adipisci, est rerum atque veritatis aliquam harum provident aut voluptates ad assumenda repellendus, minus magni saepe impedit dolores modi suscipit, laudantium nihil! Excepturi, optio aperiam eligendi dolores suscipit vero explicabo. Repellat inventore autem culpa tenetur saepe facere cupiditate adipisci non quae doloribus, quasi ipsum! Consequatur voluptatibus officiis voluptatem quas soluta expedita eum ab odio eos, minima dolor, repellendus aspernatur distinctio voluptates, harum architecto et laborum quaerat ratione dolorum deserunt! Vero, natus. Unde ab, totam deleniti, dicta ullam voluptatibus natus culpa delectus voluptatum saepe, quisquam modi! Molestias iure velit commodi animi aliquam illo iste voluptatem ad expedita dolorem tenetur maxime hic sapiente, omnis, consectetur reprehenderit. Dolor, porro praesentium doloribus officia odit quos officiis quis repellendus labore alias aut tempore, ab ad expedita quae delectus quisquam ducimus unde cumque ipsam aspernatur dolorem! Alias, magnam voluptate! Quae ea doloremque, fugiat placeat exercitationem perspiciatis ex quasi perferendis, temporibus esse repudiandae neque quibusdam optio ad quo? Maiores magni aut officiis hic obcaecati, dolore quaerat itaque commodi fugit. Consequatur eos ullam necessitatibus ea doloribus. Ipsa quis quasi laborum dolorum aliquam libero omnis et architecto nisi, quod quibusdam ea, veniam suscipit corporis nulla assumenda consequatur nihil atque? Culpa quasi iusto nemo, provident quo voluptatem illo facere, impedit nobis magni sunt, veniam dolorem ab dignissimos et expedita vel magnam cum aut! Laborum reiciendis voluptatum officia, facere tempora quisquam facilis placeat quo saepe expedita doloremque iusto ipsa quis eius ex, et quas tempore quasi maiores mollitia earum? Culpa optio veritatis dolorum doloribus neque. Neque ipsam incidunt voluptatum distinctio porro expedita placeat. Nam accusantium ullam alias enim, molestias voluptates consequuntur quo sit perspiciatis perferendis vel quibusdam doloremque a laborum et. Reiciendis vitae delectus distinctio fugiat doloremque. Beatae numquam magnam laborum commodi ipsa fugit impedit ad, ipsam non deleniti? Sequi, cum omnis. Commodi unde natus quo sequi impedit doloremque reiciendis debitis necessitatibus officia. Veniam deserunt aliquam iusto mollitia laborum itaque debitis eligendi, adipisci autem, impedit modi, numquam fugiat cupiditate nemo ab ducimus praesentium consequatur nostrum libero veritatis exercitationem repellendus accusantium fuga perspiciatis! Eos assumenda deleniti quae omnis animi quam! Excepturi modi id, totam illo assumenda ducimus recusandae provident nostrum corrupti, quaerat alias sunt aliquid eveniet temporibus dolor! Blanditiis, fuga consequuntur nulla a vitae minima in consectetur quaerat id, doloribus veritatis architecto sint perferendis modi omnis voluptates, eos maiores perspiciatis culpa eius iste. Iusto unde autem accusamus asperiores alias consequuntur, itaque similique laudantium nihil velit aperiam nobis reprehenderit tenetur laborum enim at, perspiciatis minima voluptatum eligendi. Exercitationem consequuntur earum nihil hic expedita nulla.</p>
|
|
<div id="item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni neque placeat alias iste itaque cupiditate ipsum ducimus voluptas, quo error quod impedit asperiores omnis ad repudiandae, labore reprehenderit non? Unde saepe ab, corrupti necessitatibus fugiat in minus, veritatis nostrum quis suscipit natus, autem expedita? Earum similique ipsam perferendis quibusdam velit.</div>
|
|
</body>
|
|
</html>
|
|
|
|
<!-- Cursor
|
|
cursor-auto cursor: auto;
|
|
cursor-default cursor: default;
|
|
cursor-pointer cursor: pointer;
|
|
cursor-wait cursor: wait;
|
|
cursor-text cursor: text;
|
|
cursor-move cursor: move;
|
|
cursor-help cursor: help;
|
|
cursor-not-allowed cursor: not-allowed;
|
|
cursor-none cursor: none;
|
|
cursor-context-menu cursor: context-menu;
|
|
cursor-progress cursor: progress;
|
|
cursor-cell cursor: cell;
|
|
cursor-crosshair cursor: crosshair;
|
|
cursor-vertical-text cursor: vertical-text;
|
|
cursor-alias cursor: alias;
|
|
cursor-copy cursor: copy;
|
|
cursor-no-drop cursor: no-drop;
|
|
cursor-grab cursor: grab;
|
|
cursor-grabbing cursor: grabbing;
|
|
cursor-all-scroll cursor: all-scroll;
|
|
cursor-col-resize cursor: col-resize;
|
|
cursor-row-resize cursor: row-resize;
|
|
cursor-n-resize cursor: n-resize;
|
|
cursor-e-resize cursor: e-resize;
|
|
cursor-s-resize cursor: s-resize;
|
|
cursor-w-resize cursor: w-resize;
|
|
cursor-ne-resize cursor: ne-resize;
|
|
cursor-nw-resize cursor: nw-resize;
|
|
cursor-se-resize cursor: se-resize;
|
|
cursor-sw-resize cursor: sw-resize;
|
|
cursor-ew-resize cursor: ew-resize;
|
|
cursor-ns-resize cursor: ns-resize;
|
|
cursor-nesw-resize cursor: nesw-resize;
|
|
cursor-nwse-resize cursor: nwse-resize;
|
|
cursor-zoom-in cursor: zoom-in;
|
|
cursor-zoom-out cursor: zoom-out;
|
|
-->
|