@trumpetstech/bootwind

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Test</title> <link rel="stylesheet" href="dist/index.css"/> </head> <body> <div class="d-flex justify-content-center align-items-center h-full"> <article class="card shadow p-4 w-1/2 mx-auto"> <div class="alert alert-success" role="alert"> <div class="d-flex align-items-center"> <div class="w-8 text-lg"> <i class="bi bi-check-circle-fill"></i> </div> <span class="font-bold">This is a confirmation alert</span> </div> <div class="ps-8"> <p class="text-sm"> This is a success alert with an example link with an example link — check it out! </p> <ul class="m-0 mt-1 ps-3"> </ul> <div class="mt-2 mx-n3"> <a href="#" class="alert-link text-sm font-semibold mx-3">Dismiss</a> <a href="#" class="alert-link text-sm font-semibold mx-3">See message</a> </div> </div> </div> <div class="my-5 d-flex align-items-center gap-6"> <div class="d-flex align-items-center gap-3"> <a href="#" class="btn btn-primary">Primary</a> <a href="#" class="btn btn-dark">Dark</a> <a href="#" class="btn btn-neutral">Neutral</a> </div> <div class="flex-1"> <label class="form-label" for="formInputExample">Email address</label> <input type="text" class="form-control" id="formInputExample" placeholder="Your email"> </div> </div> <div class="my-5"> <span class="badge rounded-pill bg-primary">Primary</span> <span class="badge rounded-pill bg-secondary text-dark">Secondary</span> <span class="badge rounded-pill bg-tertiary">Secondary</span> <span class="badge rounded-pill bg-success">Success</span> <span class="badge rounded-pill bg-danger">Danger</span> <span class="badge rounded-pill bg-warning">Warning</span> <span class="badge rounded-pill bg-info">Info</span> <hr> <span class="badge rounded-pill bg-opacity-30 bg-primary text-primary">Primary</span> <span class="badge rounded-pill bg-opacity-30 bg-secondary text-dark">Secondary</span> <span class="badge rounded-pill bg-opacity-30 bg-tertiary text-tertiary">Secondary</span> <span class="badge rounded-pill bg-opacity-30 bg-success text-success">Success</span> <span class="badge rounded-pill bg-opacity-30 bg-danger text-danger">Danger</span> <span class="badge rounded-pill bg-opacity-30 bg-warning text-warning">Warning</span> <span class="badge rounded-pill bg-opacity-30 bg-info text-info">Info</span> </div> <div class="mt-96"></div> <time>Mar 10<span class="fv-ordinal ">th</span>, 2020</time> <h2 class="text-center text-overline text-decoration-blue-200">Boost your conversion rate</h2> <div class="my-5 d-flex align-items-center justify-content-center bg-gray-200 w-full p-8"> <div class="z-40 bg-pink-400 rounded-10 w-12 h-12 border border-white border-2 text-center text-white">05 </div> <div class="z-30 bg-pink-400 bg-pink-400 rounded-10 w-12 h-12 border border-white border-3 text-center text-white ms-n3"> 04 </div> <div class="z-20 bg-pink-400 bg-pink-400 rounded-10 w-12 h-12 border border-white border-3 text-center text-white ms-n3"> 03 </div> <div class="z-10 bg-pink-400 bg-pink-400 rounded-10 w-12 h-12 border border-white border-3 text-center text-white ms-n3"> 02 </div> <div class="z-0 bg-pink-400 bg-pink-400 rounded-10 w-12 h-12 border border-white border-3 text-center text-white ms-n3"> 01 </div> </div> <p class="">Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.</p> <div> Lindsay Walton </div> <div class="relative z-10 w-24 h-24 rounded-md bg-left-top ring-1 ring-black/10 ring-inset shadow-lg" style="background-image:url( https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=128&h=128&q=80)"> </div> <a href="#" tabindex="-1" class="btn text-white bg-red-300 bg-red-500-hover focus-ring focus-ring-success">Hello Focus</a> <div class="d-flex justify-content-center mt-4"> <div class="mix-blend-multiply bg-blue-400 w-32 h-32 rounded-10"></div> <div class="mix-blend-multiply bg-pink-400 w-32 h-32 rounded-10 ms-n12"></div> </div> <label> <input type="checkbox" checked> Browser default </label> <label> <input type="checkbox" class="accent-pink-500" checked> Customized </label> <textarea class="form-control shadow-none-focus p-1 border border-pink-500-focus border-2-focus caret-pink-500"></textarea> <table class="table border-collapse border border-red-400 mt-5"> <caption class="caption-bottom"> Table 3.1: Professional wrestlers and their signature moves. </caption> <thead> <tr> <th class="border border-slate-300 ...">State</th> <th class="border border-slate-300 ...">City</th> </tr> </thead> <tbody> <tr> <td class="border border-slate-300 ...">Indiana</td> <td class="border border-slate-300 ...">Indianapolis</td> </tr> <tr> <td class="border border-slate-300 ...">Ohio</td> <td class="border border-slate-300 ...">Columbus</td> </tr> <tr> <td class="border border-slate-300 ...">Michigan</td> <td class="border border-slate-300 ...">Detroit</td> </tr> </tbody> </table> <div class="w-full position-relative rounded-2 overflow-auto p-8"> <iframe class="w-full aspect-video rounded-2 shadow-2" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe> </div> </article> </div> </body> </html>