Untitled

avatar
unknown
html
4 years ago
6.2 kB
24
Indexable
<!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>Document</title>

    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

    <div>

        <div class="bg-blue-100 w-2/4 mt-24 m-auto px-5 py-4 rounded-md border-blue-200 border-2">

            <p class="text-blue-700">A simple primary alert-check it out!</p>

        </div>
        
        <div class="bg-gray-200 w-2/4 mt-2 m-auto px-5 py-4 rounded-md border-gray-300 border-2">

            <p class="text-gray-700">A simple primary alert-check it out!</p>

        </div>
        
        <div class="bg-green-200 w-2/4 mt-2 m-auto px-5 py-4 rounded-md border-green-300 border-2">

            <p class="text-green-700">A simple primary alert-check it out!</p>

        </div>
        
        <div class="bg-red-200 w-2/4 mt-2 m-auto px-5 py-4 rounded-md border-red-300 border-2">

            <p class="text-red-700">A simple primary alert-check it out!</p>

        </div>
        
        <div class="bg-orange-100 w-2/4 mt-2 m-auto px-5 py-4 rounded-md border-orange-200 border-2">

            <p class="text-orange-700">A simple primary alert-check it out!</p>

        </div>

        <div class="bg-cyan-200 w-2/4 mt-2 m-auto px-5 py-4 rounded-md border-cyan-300 border-2">

            <p class="text-cyan-700">A simple primary alert-check it out!</p>

        </div> 

    </div>

    <div class="my-24 m-auto w-2/4">

        <button class="px-3 pt-1 pb-2 bg-blue-600 rounded mx-1 text-white">primary</button>

        <button class="px-3 pt-1 pb-2 bg-gray-500 rounded mx-1 text-white">secondery</button>

        <button class="px-3 pt-1 pb-2 bg-green-700 rounded mx-1 text-white">success</button>

        <button class="px-3 pt-1 pb-2 bg-red-600 rounded mx-1 text-white">danger</button>

        <button class="px-3 pt-1 pb-2 bg-yellow-400 rounded mx-1">warning</button>

        <button class="px-3 pt-1 pb-2 bg-cyan-400 rounded mx-1">info</button>

        <button class="px-3 pt-1 pb-2 bg-gray-100 rounded mx-1">light</button>

        <button class="px-3 pt-1 pb-2 bg-black rounded mx-1 text-white">dark</button>

        <div class="mt-5">

            <button class="px-3 pt-1 pb-2 bg-blue-600 rounded-l text-white">1</button>
            <button class="-mx-1 px-4 pt-1 pb-2 bg-blue-600 text-white">2</button>
            <button class="-mx-1 px-4 pt-1 pb-2 bg-blue-600 text-white">3</button>
            <button class="-mx-1 px-3 pt-1 pb-2 bg-blue-600 rounded-r text-white">4</button>

            <button class="px-3 pt-1 pb-2 bg-gray-600 rounded-l text-white ml-5">5</button>
            <button class="-mx-1 px-4 pt-1 pb-2 bg-gray-600 text-white">6</button>
            <button class="-mx-1 px-3 pt-1 pb-2 bg-gray-600 rounded-r text-white">7</button>

            <button class="px-3 pt-1 pb-2 bg-cyan-400 rounded ml-5">5</button>

        </div>

        <div class="mt-5">

            <button class="px-3 pt-1 pb-2 bg-white text-blue-600 rounded-l ml-5 border-2 border-r-0 border-blue-600 focus:bg-blue-600 focus:text-white">Radio 1</button>
            <button class="-mx-1 px-4 pt-1 pb-2 bg-white text-blue-600 border-2 border-blue-600 focus:bg-blue-600 focus:text-white">Radio 2</button>
            <button class="-mx-1 px-3 pt-1 pb-2 bg-white text-blue-600 border-2 border-blue-600 focus:bg-blue-600 focus:text-white rounded-r">Radio 3</button>

        </div>

        <div class="mt-5">

            <div class="w-60 rounded border ">

                <div class="bg-gray-500 h-36 rounded-t mb-2"></div>

                <div class="p-3">

                    <h3 class="font-bold text-lg">Card title</h3>

                    <p class="te">This is a longer card with suporting text below as a natural lead in two additional content. this content is a little bit biger.</p>

                </div>

                <div class="p-3">

                    <button class="px-3 pt-1 pb-2 bg-blue-600 rounded mx-1 text-white">Go somewhere</button>

                </div>

            </div>

        </div>

    </div>

    <div class="my-5 m-auto w-3/4 grid xl:grid-cols-4 sm:grid-cols-2 grid-cols-1 gap-3">

        <div class="">

            <div class="w-60 rounded border ">

                <div class="bg-gray-500 h-36 rounded-t mb-2"></div>

                <div class="p-3">

                    <h3 class="font-bold text-lg">Card title</h3>

                    <p class="te">This is a longer card with suporting text below as a natural lead in two additional content. this content is a little bit biger.</p>

                </div>

            </div>

        </div>

        <div>

            <div class="w-60 rounded border ">

                <div class="bg-gray-500 h-36 rounded-t mb-2"></div>

                <div class="p-3">

                    <h3 class="font-bold text-lg">Card title</h3>

                    <p class="te">This is a longer card with suporting text below as a natural lead in two additional content. this content is a little bit biger.</p>

                </div>

            </div>

        </div>

        <div>

            <div class="w-60 rounded border ">

                <div class="bg-gray-500 h-36 rounded-t mb-2"></div>

                <div class="p-3">

                    <h3 class="font-bold text-lg">Card title</h3>

                    <p class="te">This is a longer card with suporting text below as a natural lead in two additional content. this content is a little bit biger.</p>

                </div>

            </div>

        </div>

        <div>

            <div class="w-60 rounded border ">

                <div class="bg-gray-500 h-36 rounded-t mb-2"></div>

                <div class="p-3">

                    <h3 class="font-bold text-lg">Card title</h3>

                    <p class="te">This is a longer card with suporting text below as a natural lead in two additional content. this content is a little bit biger.</p>

                </div>

            </div>

        </div>

    </div>
    
</body>
</html>
Editor is loading...