Tailwind Call To Action by Editorial Staff Output View Horizontal Vertical HTML CSS JS Tidy <div class="p-16 h-full items-center flex flex-col md:flex-row md:justify-center bg-gray-800"> <div class="bg-white dark:bg-gray-800 overflow-hidden relative"> <div class="text-start w-1/2 py-12 px-4 sm:px-6 lg:py-16 lg:px-8 z-20"> <h2 class="text-3xl font-extrabold text-black dark:text-white sm:text-4xl"> <span class="block"> Need Break from work? </span> <span class="block text-indigo-500"> It's today or never. </span> </h2> <p class="text-xl mt-4 text-gray-400"> Breaks can be beneficial for both the employee and the organization, and can help employees manage stress and avoid burnout. </p> <div class="lg:mt-0 lg:flex-shrink-0"> <div class="mt-12 inline-flex rounded-md shadow"> <button type="button" class="py-4 px-6 bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg "> Get started </button> </div> </div> </div> <img src="https://cdn.pixabay.com/photo/2023/08/11/16/29/tourist-8183867_1280.png" class="absolute top-0 right-0 hidden h-full max-w-1/2 lg:block"/> </div> </div> HTML CSS JS Tidy HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Tailwind Call To Action Component features an opt-in button with the heading, short Bio, and image. Catagory Tailwind Tags Call To Action Resource Add External Stylesheets and Script <script src="https://cdn.tailwindcss.com"></script>
