Landing page in tailwind css
Web2tailwind.com

Output

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web2tailwind Theme.</title>
    <link
        href="https://fonts.googleapis.com/css2?family=Material+Icons&family=Open+Sans:[email protected];400;600;700&family=Roboto:[email protected];300;400;500;700&display=swap"
        rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer>
    </script>
    <script src='https://kit.fontawesome.com/a076d05399.js'></script>
    <link href="https://unpkg.com/[email protected]^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<style>
    @-webkit-keyframes up-down {
        0% {
            transform: translateY(10px);
        }

        100% {
            transform: translateY(-10px);
        }
    }

    @keyframes up-down {
        0% {
            transform: translateY(10px);
        }

        100% {
            transform: translateY(-10px);
        }
    }
</style>

<body style="font-family: 'Open Sans', sans-serif;">
    <nav x-data="{show:false}" class="w-full bg-white fixed shadow z-10">
        <div class="container mx-auto px-6 py-3 lg:px-20 flex items-center justify-between flex-wrap">
            <div class="flex items-center flex-shrink-0 text-gray-600 mr-6">
                <h1 class="font-bold text-3xl tracking-tight">logo</h1>
            </div>
            <div class="block md:hidden">
                <button @click="show=!show"
                    class="flex items-center px-3 py-2 border rounded text-gray-600 border-gray-600">
                    <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <title>Menu</title>
                        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
                    </svg>
                </button>
            </div>
            <div @click.away="show = false" :class="{ 'block': show, 'hidden': !show }"
                class="w-full block flex-grow md:flex md:justify-end md:w-auto">
                <div>
                    <a href="#"
                        class="block md:inline-block text-sm px-1 lg:px-3 py-2 leading-none rounded text-gray-600 hover:text-blue-500 mt-4 md:mt-0">Home</a>
                    <a href="#"
                        class="block md:inline-block text-sm px-1 lg:px-3 py-2 leading-none rounded text-gray-600 hover:text-blue-500 mt-4 md:mt-0">About</a>
                    <a href="#"
                        class="block md:inline-block text-sm px-1 lg:px-3 py-2 leading-none rounded text-gray-600 hover:text-blue-500 mt-4 md:mt-0">Team</a>
                    <a href="#"
                        class="block md:inline-block text-sm px-1 lg:px-3 mr-4 py-2 leading-none rounded text-gray-600 hover:text-blue-500 mt-4 md:mt-0">Contact</a>
                    <a href="#"
                        class="border block md:inline-block text-sm px-6 py-3 leading-none rounded text-gray-600 hover:text-gray-200 hover:bg-blue-500 mt-4 md:mt-0">Get
                        started</a>
                </div>
            </div>
        </div>
    </nav>

    <div class="container mx-auto px-6 py-3 lg:px-20 ">
        <div class="flex z-0" style="height: 24rem;">
            <div class="lg:w-1/2 mt-24">
                <h2 class="text-gray-800 font-bold text-5xl leading-tight mb-4" style="font-family: Roboto;">Elegant and
                    creative
                    solutions
                </h2>
                <p class="text-gray-700 text-2xl">We are team of talanted designers making websites with Bootstrap</p>
                <div class="flex mt-10">
                    <button type="button"
                        class="bg-green-500 text-gray-200 rounded hover:bg-blue-500 px-8 py-2 focus:outline-none mr-4">Get
                        started</button>
                    <button type="button"
                        class="flex items-center text-gray-600 rounded px-8 py-2 focus:outline-none">Watch
                        Video <span class="ml-2 material-icons hover:text-green-500">
                            play_circle_outline
                        </span></button>
                </div>
            </div>
            <div class="lg:w-1/2">
                <div class="-mt-12">
                    <img src="/assets/img/hero-img.png" class="relative"
                        style="z-index:-2; animation: up-down 2s ease-in-out infinite alternate-reverse both;"></div>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-6 pt-10 pb-3 lg:px-20 bg-white">
        <div class="flex -mx-4">
            <div class="lg:w-1/3 px-4">
                <div class="w-full h-full bg-gray-100 bg-cover bg-center rounded-lg"
                    style="background-image:url('/assets/img/bg-02.jpg')">
                    <div class="flex items-end w-full h-full rounded-lg" style="background-color:rgba(0,0,0,0.6)">
                        <div class="px-4 pt-12 pb-6">
                            <div class="text-sm text-green-400 mb-2">
                                Entertainment
                            </div>
                            <div class="mb-2">
                                <a href="#"
                                    class="font-semibold leading-tight text-2xl text-gray-100 hover:text-gray-100">
                                    Service Discount
                                </a>
                            </div>
                            <div class='flex text-gray-200 text-sm '>
                                <div class="pr-3">May 6, 2020</div>
                                <div>Posted by Admin</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="lg:w-1/3 px-4">
                <div class="w-full h-full bg-gray-100 bg-cover bg-center rounded-lg"
                    style="background-image:url('/assets/img/bg-02.jpg')">
                    <div class="flex items-end w-full h-full rounded-lg" style="background-color:rgba(0,0,0,0.6)">
                        <div class="px-4 pt-12 pb-6">
                            <div class="text-sm text-green-400 mb-2">
                                Entertainment
                            </div>
                            <div class="mb-2">
                                <a href="#"
                                    class="font-semibold leading-tight text-2xl text-gray-100 hover:text-gray-100">
                                    Software Updates.
                                </a>
                            </div>
                            <div class='flex text-gray-200 text-sm '>
                                <div class="pr-3">May 6, 2020</div>
                                <div>Posted by Admin</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="lg:w-1/3 px-4">
                <div class="w-full h-full bg-gray-100 bg-cover bg-center rounded-lg"
                    style="background-image:url('/assets/img/bg-02.jpg')">
                    <div class="flex items-end w-full h-full rounded-lg" style="background-color:rgba(0,0,0,0.6)">
                        <div class="px-4 pt-12 pb-6">
                            <div class="text-sm text-green-400 mb-2">
                                Entertainment
                            </div>
                            <div class="mb-2">
                                <a href="#"
                                    class="font-semibold leading-tight text-2xl text-gray-100 hover:text-gray-100">
                                    From Blogs.
                                </a>
                            </div>
                            <div class='flex text-gray-200 text-sm '>
                                <div class="pr-3">May 6, 2020</div>
                                <div>Posted by Admin</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div>
        <div class="container mx-auto px-6 py-3 lg:px-20">
            <div class="flex">
                <div class="lg:w-2/5 px-4">
                    <div class="px-10 py-10 border-t-2 border-red-500 shadow-lg h-full">
                        <div class="flex items-center mb-6">
                            <div class=" mr-4">
                                <span class="material-icons text-blue-500 p-2 bg-blue-200 rounded-full">
                                    location_on
                                </span>
                            </div>
                            <div class="flex-col ">
                                <div class="text-2xl font-bold text-blue-700">Location</div>
                                <div class="text-sm text-gray-600">Kupondole Lalitpur, Nepal</div>
                            </div>
                        </div>
                        <div class="flex items-center mb-6">
                            <div class=" mr-4">
                                <span class="material-icons text-blue-500 p-2 bg-blue-200 rounded-full">
                                    mail
                                </span>
                            </div>
                            <div class="flex-col ">
                                <div class="text-2xl font-bold text-blue-700">Email</div>
                                <div class="text-sm text-gray-600">[email protected]</div>
                            </div>
                        </div>
                        <div class="flex items-center mb-10">
                            <div class=" mr-4">
                                <span class="material-icons text-blue-500 p-2 bg-blue-200 rounded-full">
                                    call
                                </span>
                            </div>
                            <div class="flex-col">
                                <div class="text-2xl font-bold text-blue-700">Call</div>
                                <div class="text-sm text-gray-600">+977 9812338136</div>
                            </div>
                        </div>
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12097.433213460943!2d-74.0062269!3d40.7101282!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb89d1fe6bc499443!2sDowntown+Conference+Center!5e0!3m2!1smk!2sbg!4v1539943755621"
                            frameborder="0" style="border:0; width: 100%; height: 290px;" allowfullscreen=""></iframe>
                    </div>
                </div>
                <div class="lg:w-3/5 px-4">
                    <div class="px-10 py-8 border-t-2 border-red-500 shadow-lg h-full">
                        <form>
                            <div class="flex -mx-4 mb-2">
                                <div class="w-1/2 mx-4">
                                    <label class="font-light">First Name</label>
                                    <input type='text'
                                        class="w-full border rounded px-3 py-2 focus:outline-none text-gray-700" />
                                </div>
                                <div class="w-1/2 mx-4">
                                    <label class="font-light">First Name</label>
                                    <input type='text'
                                        class="w-full border rounded px-3 py-2 focus:outline-none text-gray-700" />
                                </div>
                            </div>
                            <div class="mb-2">
                                <label class="font-light">Subject<label>
                                        <input type='text'
                                            class="w-full border rounded px-3 py-2 focus:outline-none text-gray-700" />
                            </div>
                            <div>
                                <label class="font-light">Message</label>
                                <textarea class="px-2 py-2 focus:outline-none w-full border rounded"
                                    rows="10"></textarea>
                            </div>
                            <div class="mt-4 flex justify-center pb-6">
                                <button type="button" class="text-sm bg-blue-600 text-gray-200 rounded-full px-8 py-3">
                                    Send Message</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="" style="background-color: #013069;">
        <div class="container mx-auto px-6 lg:px-20 py-12">
            <div class="lg:flex">
                <div class="w-full lg:w-2/3">
                    <div class="lg:flex">
                        <div class="w-full mb-12 lg:mb-0 lg:w-1/2">
                            <h2 style="font-family: 'Baloo Tamma 2', cursive;"
                                class="font-bold text-xl text-gray-100 mb-4">Web2tailwind</h2>
                            <p class="text-gray-400">
                                Web2tailwind.com is a site for developer, student and learner,
                                where they can grab
                                hundreds of various html component code and try online as fast as posible without...
                            </p>
                            <div class="flex mt-6">
                                <i style="background-color: #3B5998;"
                                    class="flex items-center justify-center h-12 w-12 mr-1 rounded-full fab fill-current text-white text-xl fa-facebook-f"></i>
                                <i style="background-color:#dd4b39"
                                    class="flex items-center justify-center h-12 w-12 mx-1 rounded-full fas fill-current text-white text-xl fa-envelope"></i>
                                <i style="background-color:#125688;"
                                    class="flex items-center justify-center h-12 w-12 mx-1 rounded-full fab fill-current text-white text-xl fa-instagram"></i>
                                <i style="background-color:#55ACEE;"
                                    class="flex items-center justify-center h-12 w-12 mx-1 rounded-full fab fill-current text-white text-xl fa-twitter"></i>
                            </div>
                        </div>
                        <div class="w-full lg:w-1/2 lg:flex lg:px-6 ">
                            <div class="w-full mb-6 lg:mb-0 lg:w-1/2">
                                <h2 style="font-family: 'Baloo Tamma 2', cursive;" class="font-bold text-gray-100 mb-4">
                                    Useful Links</h2>
                                <ul class="text-gray-500 text-sm">
                                    <li class="pt-1 pb-2">Home</li>
                                    <li class="pt-1 pb-2">About us</li>
                                    <li class="pt-1 pb-2">Services</li>
                                    <li class="pt-1 pb-2">Terms of Services</li>
                                    <li class="pt-1 pb-2">Privacy Policy</li>
                                </ul>
                            </div>
                            <div class="w-full mb-6 lg:mb-0 lg:w-1/2">
                                <h2 style="font-family: 'Baloo Tamma 2', cursive;" class="font-bold text-gray-100 mb-4">
                                    Our sevices</h2>
                                <ul class="text-gray-500 text-sm">
                                    <li class="pt-1 pb-2">Web Design</li>
                                    <li class="pt-1 pb-2">Web Development</li>
                                    <li class="pt-1 pb-2">Product Management</li>
                                    <li class="pt-1 pb-2">Marketing</li>
                                    <li class="pt-1 pb-2">Graphics Design</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full lg:w-1/3">
                    <h2 style="font-family: 'Baloo Tamma 2', cursive;" class=" font-bold text-gray-100 mb-4">
                        Our Newsletter
                    </h2>
                    <div class="text-gray-300 mb-8">
                        Subscribe our weely Newsletter to get regular updates about our blogs.
                    </div>
                    <div class="flex">
                        <input type="text" class="rounded-l px-2 focus:outline-none">
                        <button class="text-gray-200 rounded-r hover:bg-blue-500 px-4 py-2 focus:outline-none"
                            style="background-color: #dc0900;">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

   
    <div class="" style="font-family: 'Baloo Tamma 2', cursive;background-color: #012046;">
        <div class="container mx-auto px-6 lg:px-20 py-6">
            <div class="flex justify-center text-gray-300 mb-1">
                &copy; 2020 &nbsp;<span class="font-bold">Web2tailwind.</span>&nbsp;2020 All right reserved.
            </div>
            <div class="flex font-light justify-center text-gray-500 text-sm">
                <p>Designed by <span class="font-bold">Web2tailwind.com</span></p>
            </div>
        </div>
    </div>
</body>

</html>
© 2019 - 2021 Web2tailwind.com