Tailwind CSS Content Components

<section class="pb-12 md:pb-24">
        <div class="relative pt-10 pb-80">
            <img class="absolute top-0 left-0 w-full h-full" src="flow-assets/content/blog-bg-waves.png" alt="">
            <div class="container mx-auto px-4 relative">
                <a href="#" class="inline-block mb-14 text-lg font-medium hover:text-lime-600">Back to blog</a>
                <div class="max-w-3xl mx-auto text-center">
                    <span class="inline-block px-2 mb-4 text-sm leading-5 font-medium bg-white border border-gray-200 rounded-full">Solar Power</span>
                    <h2 class="font-heading text-4xl xs:text-5xl md:text-6xl tracking-xs mb-6">Harnessing the Power of the Sun: Exploring the World of Solar Energy</h2>
                    <div class="flex items-center justify-center">
                        <span class="text-sm font-medium">9 min read</span>
                        <span class="mx-3">
                            <svg width="5" height="4" viewBox="0 0 5 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="2.5" cy="2" r="2" fill="#929C9A"></circle>
                            </svg>        
                        </span>                    
                        <span class="text-sm font-medium">December 11, 2023</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="container mx-auto -mt-64 px-4 relative">
            <div class="flex flex-wrap -mx-4 mb-18">
                <div class="w-full md:w-1/6 px-4 mb-6 md:mb-0">
                    <div class="flex flex-row md:flex-col items-center md:items-start gap-4">
                        <span class="block text-sm font-medium text-gray-700">Author</span>
                        <img class="block w-16 rounded-full" src="flow-assets/content/avatar-circle.png" alt="">
                        <div>
                            <span class="block font-medium">Leslie Alexander</span>
                            <span class="text-sm text-gray-700">Solar energy specialist</span>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-4/6 px-4 mb-6 md:mb-0">
                    <img class="block w-full max-w-3xl h-116 mx-auto object-cover rounded-4xl" src="flow-assets/content/image-center.png" alt="">
                </div>
                <div class="w-full md:w-auto px-4">
                    <div class="flex flex-row md:flex-col items-center justify-end gap-4">
                        <span class="block md:mb-2 text-sm font-medium text-gray-700">Share</span>
                        <a href="#" class="inline-block text-gray-700 hover:text-lime-600">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_174_1147)">
                                <path d="M6.2918 18.125C13.8371 18.125 17.9652 11.8723 17.9652 6.45155C17.9652 6.27577 17.9613 6.09608 17.9535 5.9203C18.7566 5.33955 19.4496 4.62021 20 3.79608C19.2521 4.12883 18.458 4.34615 17.6449 4.44061C18.5011 3.92742 19.1421 3.12123 19.4492 2.17147C18.6438 2.6488 17.763 2.98551 16.8445 3.16718C16.2257 2.50963 15.4075 2.07426 14.5164 1.92838C13.6253 1.78249 12.711 1.93421 11.9148 2.36008C11.1186 2.78595 10.4848 3.46225 10.1115 4.28443C9.73825 5.1066 9.64619 6.02885 9.84961 6.90858C8.21874 6.82674 6.62328 6.40309 5.16665 5.66508C3.71002 4.92708 2.42474 3.8912 1.39414 2.6246C0.870333 3.5277 0.710047 4.59637 0.945859 5.61341C1.18167 6.63045 1.79589 7.51954 2.66367 8.09999C2.01219 8.0793 1.37498 7.9039 0.804688 7.58827V7.63905C0.804104 8.58679 1.13175 9.50549 1.73192 10.239C2.3321 10.9725 3.16777 11.4755 4.09687 11.6625C3.49338 11.8276 2.85999 11.8517 2.2457 11.7328C2.50788 12.5479 3.01798 13.2607 3.70481 13.7719C4.39164 14.2831 5.22093 14.5672 6.07695 14.5844C4.62369 15.7259 2.82848 16.3451 0.980469 16.3422C0.652739 16.3417 0.325333 16.3216 0 16.282C1.87738 17.4865 4.06128 18.1262 6.2918 18.125Z" fill="currentColor"></path>
                                </g>
                            </svg>                                
                        </a>
                        <a href="#" class="inline-block text-gray-700 hover:text-lime-600">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_174_1149)">
                                <path d="M18.5195 0H1.47656C0.660156 0 0 0.644531 0 1.44141V18.5547C0 19.3516 0.660156 20 1.47656 20H18.5195C19.3359 20 20 19.3516 20 18.5586V1.44141C20 0.644531 19.3359 0 18.5195 0ZM5.93359 17.043H2.96484V7.49609H5.93359V17.043ZM4.44922 6.19531C3.49609 6.19531 2.72656 5.42578 2.72656 4.47656C2.72656 3.52734 3.49609 2.75781 4.44922 2.75781C5.39844 2.75781 6.16797 3.52734 6.16797 4.47656C6.16797 5.42188 5.39844 6.19531 4.44922 6.19531ZM17.043 17.043H14.0781V12.4023C14.0781 11.2969 14.0586 9.87109 12.5352 9.87109C10.9922 9.87109 10.7578 11.0781 10.7578 12.3242V17.043H7.79688V7.49609H10.6406V8.80078H10.6797C11.0742 8.05078 12.043 7.25781 13.4844 7.25781C16.4883 7.25781 17.043 9.23438 17.043 11.8047V17.043Z" fill="currentColor"></path>
                                </g>
                            </svg>                                                               
                        </a>
                        <a href="#" class="inline-block text-gray-700 hover:text-lime-600">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M14.4104 11.25L14.9881 7.63047H11.3761V5.28164C11.3761 4.29141 11.8807 3.32617 13.4984 3.32617H15.1404V0.244531C15.1404 0.244531 13.6503 0 12.2256 0C9.25103 0 7.30671 1.73359 7.30671 4.87187V7.63047H4.00024V11.25H7.30671V20H11.3761V11.25H14.4104Z" fill="currentColor"></path>
                            </svg>                                                      
                        </a>
                        <a href="#" class="inline-block text-gray-700 hover:text-lime-600">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.5 10.75C8.82209 11.1806 9.23302 11.5369 9.70491 11.7947C10.1768 12.0525 10.6986 12.2058 11.235 12.2442C11.7713 12.2826 12.3097 12.2052 12.8135 12.0173C13.3173 11.8294 13.7748 11.5353 14.155 11.155L16.405 8.90497C17.0881 8.19772 17.4661 7.25046 17.4575 6.26722C17.449 5.28398 17.0546 4.34343 16.3593 3.64815C15.664 2.95287 14.7235 2.55849 13.7403 2.54995C12.757 2.5414 11.8098 2.91938 11.1025 3.60247L9.8125 4.88497" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M11.4999 9.24992C11.1778 8.81933 10.7669 8.46304 10.295 8.20522C9.8231 7.9474 9.30127 7.79409 8.76492 7.75567C8.22856 7.71726 7.69022 7.79465 7.1864 7.98259C6.68258 8.17053 6.22507 8.46462 5.84491 8.84492L3.59491 11.0949C2.91181 11.8022 2.53383 12.7494 2.54238 13.7327C2.55092 14.7159 2.94531 15.6565 3.64059 16.3517C4.33587 17.047 5.27641 17.4414 6.25965 17.45C7.24289 17.4585 8.19015 17.0805 8.89741 16.3974L10.1799 15.1149" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>                                                            
                        </a>
                    </div>
                </div>
            </div>
            <div class="max-w-lg lg:max-w-2xl mx-auto">
                <p class="text-lg mb-4">In a world increasingly concerned with environmental sustainability and the search for renewable energy sources, solar power has emerged as a shining star. Harnessing the power of the sun, solar energy offers a clean and inexhaustible solution to our growing energy needs.</p>
                <p class="text-lg mb-16">This article delves into the fascinating world of solar energy, exploring its mechanisms, benefits, and the transformative impact it can have on our planet.</p>
                <h4 class="text-3xl font-medium mb-8">The Basics of Solar Energy</h4>
                <h5 class="text-xl font-medium mb-6">1. Photovoltaic Cells</h5>
                <div class="inline-flex mb-6">
                    <span class="pt-2">
                        <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="4" cy="4" r="4" fill="#BEF264"></circle>
                        </svg>   
                    </span>                     
                    <p class="text-lg ml-4">Solar panels are made up of photovoltaic (PV) cells that convert sunlight into electricity.</p>
                </div>
                <div class="inline-flex mb-8">
                    <span class="pt-2">
                        <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="4" cy="4" r="4" fill="#BEF264"></circle>
                        </svg>   
                    </span>                     
                    <p class="text-lg ml-4">When sunlight hits the PV cells, it excites electrons, generating an electric current.</p>
                </div>
                <h5 class="text-xl font-medium mb-6">2. Solar Thermal Systems</h5>
                <div class="inline-flex mb-6">
                    <span class="pt-2">
                        <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="4" cy="4" r="4" fill="#BEF264"></circle>
                        </svg>   
                    </span>                     
                    <p class="text-lg ml-4">Concentrated solar power (CSP) systems use mirrors or lenses to focus sunlight onto a small area, producing heat that can then be used to generate electricity.</p>
                </div>
                <h5 class="text-xl font-medium mb-6">3. Net Metering</h5>
                <div class="inline-flex mb-16">
                    <span class="pt-2">
                        <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="4" cy="4" r="4" fill="#BEF264"></circle>
                        </svg>   
                    </span>                     
                    <p class="text-lg ml-4">Solar energy systems often incorporate net metering, allowing users to sell excess electricity back to the grid, promoting energy efficiency.</p>
                </div>
                <div class="mb-16 py-10 px-5 xs:px-10 bg-teal-900 rounded-2xl">
                    <h4 class="text-3xl font-medium text-white mb-10">Your Source for Green Energy Updates</h4>
                    <div class="flex flex-col sm:flex-row">
                        <input type="email" class="h-14 w-full px-4 py-3 placeholder-gray-700 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full" placeholder="Your e-mail...">
                        <a href="#" class="flex-shrink-0 h-14 inline-flex mt-3 sm:mt-0 sm:ml-2 py-2 px-6 items-center justify-center text-lg font-medium text-black hover:text-white border border-lime-500 hover:border-black bg-lime-500 hover:bg-black rounded-full transition duration-200">Get in touch</a>
                    </div>
                </div>
                <div>
                    <svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.80102 0C8.08512 0 9.03652 1.19287 8.75093 2.44482L6.96252 10.2845C6.68458 11.5029 7.61049 12.6638 8.86018 12.6638C9.93515 12.6638 10.8066 13.5353 10.8066 14.6102V22C10.8066 23.1046 9.91115 24 8.80658 24H2C0.895431 24 0 23.1046 0 22V15.5601C0 15.4 0.0192064 15.2406 0.0572071 15.0851L3.37204 1.52507C3.5909 0.629802 4.3932 0 5.31484 0H6.80102ZM21.9944 0C23.2785 0 24.2299 1.19287 23.9443 2.44482L22.1559 10.2845C21.878 11.5029 22.8039 12.6638 24.0536 12.6638C25.1286 12.6638 26 13.5353 26 14.6102V22C26 23.1046 25.1046 24 24 24H17.1934C16.0888 24 15.1934 23.1046 15.1934 22V15.5601C15.1934 15.4 15.2126 15.2406 15.2506 15.0851L18.5655 1.52507C18.7843 0.629802 19.5866 0 20.5083 0H21.9944Z" fill="#BEF264"></path>
                    </svg>    
                    <p class="text-2xl font-medium text-teal-800 mt-8 mb-8">“Thanks to Flow, my energy is now solar-powered – sustainable, efficient, and exceptional service.”</p>         
                    <div class="flex mb-16 items-center">
                        <img class="w-16 rounded-full" src="flow-assets/content/avatar-men1.png" alt="">
                        <div class="ml-6">
                            <span class="block text-xl font-medium">Cody Fisher</span>
                            <span class="text-sm text-gray-700">Solar energy service</span>
                        </div>
                    </div>
                    <img class="block w-full max-w-3xl h-112 mx-auto object-cover rounded-4xl mb-16" src="flow-assets/content/image-window.png" alt="">
                    <h4 class="text-3xl font-medium mb-8">The Basics of Solar Energy</h4>
                    <p class="text-lg mb-4">As technology advances, the potential for solar energy continues to grow. Innovations in materials, storage, and efficiency are making solar power more accessible and affordable for individuals and businesses alike.</p>
                    <p class="text-lg mb-4">Governments and organizations worldwide are investing in solar research and development, recognizing its pivotal role in creating a sustainable future.</p>
                    <p class="text-lg mb-4">Harnessing the power of the sun through solar energy represents a significant stride towards a cleaner, more sustainable future. As we explore and invest in this remarkable technology, we move closer to a world where our energy needs are met without compromising the health of our planet.</p>
                    <p class="text-lg mb-18">Solar energy is not just a technological advancement; it is a beacon of hope for a greener, more sustainable world.</p>
                </div>
            </div>
            <div class="flex flex-wrap -mx-4 mb-24">
                <div class="hidden lg:block lg:w-1/6 lg:px-4"></div>
                <div class="w-full md:w-5/6 lg:w-4/6 px-4 mb-6 md:mb-0">
                    <div class="w-full max-w-3xl mx-auto py-8 px-5 xs:px-10 bg-orange-50 rounded-2xl">
                        <div class="md:flex">
                            <div class="flex-shrink-0">
                                <img class="block w-18 h-18 rounded-full" src="flow-assets/content/avatar-circle.png" alt="">
                            </div>
                            <div class="mt-6 md:mt-0 md:ml-8">
                                <span class="block text-lg font-medium">Leslie Alexander</span>
                                <span class="block mb-4 text-gray-700">Solar energy specialist</span>
                                <p class="text-lg mb-4">Leslie Alexander is a distinguished Solar Energy Specialist at the forefront of the renewable energy revolution. With a passion for sustainable technology and a commitment to addressing the global energy crisis, Leslie has dedicated her career to advancing the field of solar energy.</p>
                                <a href="#" class="inline-block text-gray-700 hover:text-lime-600">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0_174_1224)">
                                        <path d="M22.2234 0H1.77187C0.792187 0 0 0.773438 0 1.72969V22.2656C0 23.2219 0.792187 24 1.77187 24H22.2234C23.2031 24 24 23.2219 24 22.2703V1.72969C24 0.773438 23.2031 0 22.2234 0ZM7.12031 20.4516H3.55781V8.99531H7.12031V20.4516ZM5.33906 7.43438C4.19531 7.43438 3.27188 6.51094 3.27188 5.37187C3.27188 4.23281 4.19531 3.30937 5.33906 3.30937C6.47813 3.30937 7.40156 4.23281 7.40156 5.37187C7.40156 6.50625 6.47813 7.43438 5.33906 7.43438ZM20.4516 20.4516H16.8937V14.8828C16.8937 13.5562 16.8703 11.8453 15.0422 11.8453C13.1906 11.8453 12.9094 13.2937 12.9094 14.7891V20.4516H9.35625V8.99531H12.7687V10.5609H12.8156C13.2891 9.66094 14.4516 8.70938 16.1813 8.70938C19.7859 8.70938 20.4516 11.0813 20.4516 14.1656V20.4516Z" fill="currentColor"></path>
                                        </g>
                                    </svg>                                        
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/6 lg:w-auto px-4">
                    <div class="flex flex-row md:flex-col items-center justify-end gap-4 md:gap-2">
                        <span class="block mb-6 text-sm font-medium text-gray-700">Share</span>
                        <a href="#" class="inline-block mb-4 text-gray-700 hover:text-lime-600">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_174_1147)">
                                <path d="M6.2918 18.125C13.8371 18.125 17.9652 11.8723 17.9652 6.45155C17.9652 6.27577 17.9613 6.09608 17.9535 5.9203C18.7566 5.33955 19.4496 4.62021 20 3.79608C19.2521 4.12883 18.458 4.34615 17.6449 4.44061C18.5011 3.92742 19.1421 3.12123 19.4492 2.17147C18.6438 2.6488 17.763 2.98551 16.8445 3.16718C16.2257 2.50963 15.4075 2.07426 14.5164 1.92838C13.6253 1.78249 12.711 1.93421 11.9148 2.36008C11.1186 2.78595 10.4848 3.46225 10.1115 4.28443C9.73825 5.1066 9.64619 6.02885 9.84961 6.90858C8.21874 6.82674 6.62328 6.40309 5.16665 5.66508C3.71002 4.92708 2.42474 3.8912 1.39414 2.6246C0.870333 3.5277 0.710047 4.59637 0.945859 5.61341C1.18167 6.63045 1.79589 7.51954 2.66367 8.09999C2.01219 8.0793 1.37498 7.9039 0.804688 7.58827V7.63905C0.804104 8.58679 1.13175 9.50549 1.73192 10.239C2.3321 10.9725 3.16777 11.4755 4.09687 11.6625C3.49338 11.8276 2.85999 11.8517 2.2457 11.7328C2.50788 12.5479 3.01798 13.2607 3.70481 13.7719C4.39164 14.2831 5.22093 14.5672 6.07695 14.5844C4.62369 15.7259 2.82848 16.3451 0.980469 16.3422C0.652739 16.3417 0.325333 16.3216 0 16.282C1.87738 17.4865 4.06128 18.1262 6.2918 18.125Z" fill="currentColor"></path>
                                </g>
                            </svg>                                
                        </a>
                        <a href="#" class="inline-block mb-4 text-gray-700 hover:text-lime-600">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_174_1149)">
                                <path d="M18.5195 0H1.47656C0.660156 0 0 0.644531 0 1.44141V18.5547C0 19.3516 0.660156 20 1.47656 20H18.5195C19.3359 20 20 19.3516 20 18.5586V1.44141C20 0.644531 19.3359 0 18.5195 0ZM5.93359 17.043H2.96484V7.49609H5.93359V17.043ZM4.44922 6.19531C3.49609 6.19531 2.72656 5.42578 2.72656 4.47656C2.72656 3.52734 3.49609 2.75781 4.44922 2.75781C5.39844 2.75781 6.16797 3.52734 6.16797 4.47656C6.16797 5.42188 5.39844 6.19531 4.44922 6.19531ZM17.043 17.043H14.0781V12.4023C14.0781 11.2969 14.0586 9.87109 12.5352 9.87109C10.9922 9.87109 10.7578 11.0781 10.7578 12.3242V17.043H7.79688V7.49609H10.6406V8.80078H10.6797C11.0742 8.05078 12.043 7.25781 13.4844 7.25781C16.4883 7.25781 17.043 9.23438 17.043 11.8047V17.043Z" fill="currentColor"></path>
                                </g>
                            </svg>                                                               
                        </a>
                        <a href="#" class="inline-block mb-4 text-gray-700 hover:text-lime-600">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M14.4104 11.25L14.9881 7.63047H11.3761V5.28164C11.3761 4.29141 11.8807 3.32617 13.4984 3.32617H15.1404V0.244531C15.1404 0.244531 13.6503 0 12.2256 0C9.25103 0 7.30671 1.73359 7.30671 4.87187V7.63047H4.00024V11.25H7.30671V20H11.3761V11.25H14.4104Z" fill="currentColor"></path>
                            </svg>                                                      
                        </a>
                        <a href="#" class="inline-block mb-4 text-gray-700 hover:text-lime-600">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.5 10.75C8.82209 11.1806 9.23302 11.5369 9.70491 11.7947C10.1768 12.0525 10.6986 12.2058 11.235 12.2442C11.7713 12.2826 12.3097 12.2052 12.8135 12.0173C13.3173 11.8294 13.7748 11.5353 14.155 11.155L16.405 8.90497C17.0881 8.19772 17.4661 7.25046 17.4575 6.26722C17.449 5.28398 17.0546 4.34343 16.3593 3.64815C15.664 2.95287 14.7235 2.55849 13.7403 2.54995C12.757 2.5414 11.8098 2.91938 11.1025 3.60247L9.8125 4.88497" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M11.4999 9.24992C11.1778 8.81933 10.7669 8.46304 10.295 8.20522C9.8231 7.9474 9.30127 7.79409 8.76492 7.75567C8.22856 7.71726 7.69022 7.79465 7.1864 7.98259C6.68258 8.17053 6.22507 8.46462 5.84491 8.84492L3.59491 11.0949C2.91181 11.8022 2.53383 12.7494 2.54238 13.7327C2.55092 14.7159 2.94531 15.6565 3.64059 16.3517C4.33587 17.047 5.27641 17.4414 6.25965 17.45C7.24289 17.4585 8.19015 17.0805 8.89741 16.3974L10.1799 15.1149" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>                                                            
                        </a>
                    </div>
                </div>
            </div>
            <div class="flex mb-4 items-center">
                <svg width="8" height="8" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="4" cy="4" r="4" fill="#022C22"></circle>
                </svg>
                <span class="inline-block ml-2 text-sm font-medium text-teal-900">About us</span>                        
            </div>
            <div class="border-t pt-16">
              <div class="max-w-lg lg:max-w-none mx-auto">
                <div class="flex flex-wrap -mx-4">
                    <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
                       <a href="#" class="block">
                            <img class="block w-full h-72 rounded-2xl object-cover mb-8" src="flow-assets/content/post-sm-picture1.png" alt="">
                            <div>
                                <h4 class="text-3xl font-medium mb-4">Harnessing the Power of the Sun: Exploring the World of Solar Energy</h4>
                                <p class="text-lg text-gray-700 mb-6">Solar energy is revolutionizing the way we power our world. In this blog post, we'll del...</p>
                                <div class="flex items-center">
                                    <img class="block w-10 h-10 rounded-full" src="flow-assets/content/avatar-circle.png" alt="">
                                    <div class="flex items-center ml-4">
                                        <span class="text-sm font-medium">Leslie Alexander</span>
                                        <span class="mx-4">
                                            <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="2" cy="2" r="2" fill="#929C9A"></circle>
                                            </svg>     
                                        </span>
                                        <span class="text-sm font-medium">9 min read</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
                        <a href="#" class="block">
                             <img class="block w-full h-72 rounded-2xl object-cover mb-8" src="flow-assets/content/post-sm-picture2.png" alt="">
                             <div>
                                 <h4 class="text-3xl font-medium mb-4">Wind Power: A Breath of Fresh Air for Clean Energy Enthusiasts</h4>
                                 <p class="text-lg text-gray-700 mb-6">Solar energy is revolutionizing the way we power our world. In this blog post, we'll del...</p>
                                 <div class="flex items-center">
                                     <img class="block w-10 h-10 rounded-full" src="flow-assets/content/avatar-circle.png" alt="">
                                     <div class="flex items-center ml-4">
                                         <span class="text-sm font-medium">Leslie Alexander</span>
                                         <span class="mx-4">
                                             <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                 <circle cx="2" cy="2" r="2" fill="#929C9A"></circle>
                                             </svg>     
                                         </span>
                                         <span class="text-sm font-medium">9 min read</span>
                                     </div>
                                 </div>
                             </div>
                         </a>
                     </div>
                     <div class="w-full lg:w-1/3 px-4">
                        <a href="#" class="block">
                             <img class="block w-full h-72 rounded-2xl object-cover mb-8" src="flow-assets/content/post-sm-picture3.png" alt="">
                             <div>
                                 <h4 class="text-3xl font-medium mb-4">Harnessing the Power of the Sun: Exploring the World of Solar Energy</h4>
                                 <p class="text-lg text-gray-700 mb-6">Solar energy is revolutionizing the way we power our world. In this blog post, we'll del...</p>
                                 <div class="flex items-center">
                                     <img class="block w-10 h-10 rounded-full" src="flow-assets/content/avatar-circle.png" alt="">
                                     <div class="flex items-center ml-4">
                                         <span class="text-sm font-medium">Leslie Alexander</span>
                                         <span class="mx-4">
                                             <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                 <circle cx="2" cy="2" r="2" fill="#929C9A"></circle>
                                             </svg>     
                                         </span>
                                         <span class="text-sm font-medium">9 min read</span>
                                     </div>
                                 </div>
                             </div>
                         </a>
                     </div>
                </div>
              </div>
            </div>
        </div>
     
    </section>

<section class="bg-darkPink-900 py-28">
    <div class="container mx-auto px-4">
        <div class="mb-12 pb-12 border-b border-white border-opacity-20">
            <div class="flex flex-wrap -m-4">
                <div class="w-full lg:w-1/2 p-4">
                    <div class="flex flex-wrap items-center gap-4 mb-10">
                        <span class="px-2 py-1 bg-white bg-opacity-10 border border-white border-opacity-20 rounded-md text-white text-xs font-medium">Accounting</span>
                        <p class="text-white text-sm font-medium">17 Jul 2024</p>
                    </div>
                    <h1 class="font-heading text-white text-4xl md:text-5xl font-bold max-w-xs md:max-w-md">Mastering Cash Basis Accounting: A Step-by-Step Guide</h1>
                </div>
                <div class="w-full lg:w-1/2 p-4">
                    <img class="h-96 object-cover rounded-2xl w-full" src="vista-assets/images/blog-content/placeholder-pink.png" alt="">
                </div>
            </div>
        </div>
        <div class="pb-24 mb-24 border-b border-white border-opacity-20">
            <div class="flex flex-wrap -m-4">
                <div class="w-full lg:w-1/3 p-4">
                    <div class="bg-pinkSecondary-900 p-8 rounded-2xl">
                        <a href="#" class="block text-white text-opacity-50 hover:text-opacity-100 transition duration-200 mb-3">Table of content</a>
                        <a href="#" class="block text-white text-opacity-50 hover:text-opacity-100 transition duration-200 mb-3">What is cash basis accounting?</a>
                        <a href="#" class="block text-white text-opacity-50 hover:text-opacity-100 transition duration-200 mb-3">How does cash accounting work?</a>
                        <a href="#" class="block text-white text-opacity-50 hover:text-opacity-100 transition duration-200 mb-12">The bottom line on cash basis accounting</a>
                        <p class="text-white text-opacity-50 mb-4">Written by</p>
                        <div class="flex items-center flex-wrap gap-4 mb-12">
                            <img class="h-12" src="vista-assets/images/blog-content/avatar.png" alt="">
                            <div>
                                <p class="text-white font-semibold mb-1">Madelyn</p>
                                <p class="text-gray-400 text-sm">Content Marketing</p>
                            </div>
                        </div>
                        <p class="text-white text-opacity-50 mb-4">Share this article</p>
                        <div class="flex flex-wrap gap-6">
                            <a href="#" class="inline-block">
                                <img class="h-6" src="vista-assets/images/logos/twitter-x-logo.svg" alt="">
                            </a>
                            <a href="#" class="inline-block">
                                <img class="h-6" src="vista-assets/images/logos/linkedin-logo.svg" alt="">
                            </a>
                            <a href="#" class="inline-block">
                                <img class="h-6" src="vista-assets/images/logos/instagram-logo.svg" alt="">
                            </a>
                            <a href="#" class="inline-block">
                                <img class="h-6" src="vista-assets/images/logos/facebook-logo.svg" alt="">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="w-full lg:w-2/3 p-4">
                    <div class="lg:pl-20">
                        <p class="text-white text-opacity-70 text-xl mb-12 max-w-4xl">Cash basis accounting simplifies tracking by only recording transactions when cash enters or exits your business, regardless of when they're earned or billed. It's commonly used by individuals and small businesses with straightforward cash flows. While it offers simplicity and clarity regarding available cash, it may not provide a complete picture of business health or growth opportunities.</p>
                        <h2 class="text-white text-4xl font-bold mb-6">What is cash basis accounting?</h2>
                        <p class="text-white text-opacity-70 text-xl mb-12 max-w-4xl">Cash basis accounting is when you only record transactions when the money enters or leaves your business, even if they were earned or billed earlier.</p>
                        <h2 class="text-white text-4xl font-bold mb-6">How does cash accounting work?</h2>
                        <p class="text-white text-opacity-70 text-xl mb-6 max-w-4xl">Cash basis accounting is a simple way to track the cash that’s flowing in and out of your business.</p>
                        <p class="text-white text-opacity-70 text-xl mb-6 max-w-4xl">Here are a few examples of what it can look like:</p>
                        <ul class="list-disc pl-6 flex flex-col gap-6 mb-12">
                            <li class="text-white text-opacity-70 text-xl max-w-3xl">With cash basis accounting, you record payments for products as they're received, not beforehand, even with flexible payment options like installment plans for your online shop.</li>
                            <li class="text-white text-opacity-70 text-xl max-w-3xl">If customers pay with credit cards, revenue isn't recorded immediately but when the payment is received from the credit card company.</li>
                            <li class="text-white text-opacity-70 text-xl max-w-3xl">You’re a graphic designer who spends a week in April creating a brochure for a local gallery. You submit an invoice of net 30, which means that the gallery is paying you in May. With cash basis accounting, you’d recognize that income in May when you receive the payment rather than in April, when you did the work.</li>
                            <li class="text-white text-opacity-70 text-xl max-w-3xl">In cash basis accounting for your online clothing shop, sales are only recorded when payment is received via debit or cash, not credit.</li>
                        </ul>
                        <h2 class="text-white text-4xl font-bold mb-6">The bottom line on cash basis accounting</h2>
                        <div class="flex items-center gap-6">
                            <div class="bg-pink-500 w-1 h-16 flex-shrink-0"></div>
                            <p class="text-sweetPink-500 text-xl font-medium max-w-3xl">Cash basis accounting is a good option for small businesses or individuals, especially those who almost exclusively deal with cash.</p>
                        </div>
                    </div>ś
                </div>
            </div>
        </div>
        <div class="flex justify-between items-center flex-wrap gap-4 mb-10">
            <h2 class="font-heading text-white text-3xl font-bold">Continue Reading</h2>
            <a href="#" class="inline-flex items-center gap-2 text-white hover:text-opacity-70 transition duration-200">
                <span class="text-sm font-medium">See all</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M5.5 3.00024L10.5 8.00024L5.5 13.0002" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
        </div>
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/3 p-4">
                <a href="#" class="group">
                    <img class="h-60 w-full object-cover rounded-2xl mb-6" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt="">
                    <p class="text-white text-xl font-bold group-hover:underline max-w-xs">7 Black Friday tips for small businesses</p>
                </a>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <a href="#" class="group">
                    <img class="h-60 w-full object-cover rounded-2xl mb-6" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt="">
                    <p class="text-white text-xl font-bold group-hover:underline max-w-xs">5 ways to get paid faster with automated invoicing</p>
                </a>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <a href="#" class="group">
                    <img class="h-60 w-full object-cover rounded-2xl mb-6" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt="">
                    <p class="text-white text-xl font-bold group-hover:underline max-w-xs">How to prepare for a business tax audit</p>
                </a>
            </div>
        </div>
    </div> 
</section>

<section class="py-20 relative scan-lines">
  <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
  <div class="absolute inset-0 opacity-20">
    <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
    <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
    <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
    <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
  </div>
  
  <div class="container px-4 mx-auto mb-16 relative z-10">
    <div class="max-w-xl lg:max-w-2xl mx-auto text-center">
      <div class="flex mb-2 items-center justify-center">
        <a class="text-xs text-blue-400 hover:text-purple-500 transition-colors duration-300 tracking-wider" href="#">HOME</a>
        <svg class="w-3 h-3 mx-1 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
        </svg>
        <a class="text-xs text-purple-500 hover:text-green-400 transition-colors duration-300 tracking-wider" href="#">DATA LOG</a>
        <svg class="w-3 h-3 mx-1 text-purple-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
        </svg>
        <a class="text-xs text-green-400 hover:text-blue-400 transition-colors duration-300 tracking-wider" href="#">ENTRY 001</a>
      </div>
      <div class="relative">
        <h2 class="mb-6 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-black font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">NEURAL INTERFACE PROTOCOL</h2>
        <div class="absolute -top-2 -left-2 w-full h-full border-2 border-blue-400 opacity-10 transform rotate-1"></div>
      </div>
      <div class="flex items-center justify-center hologram-effect p-6 rounded-lg border border-blue-400 border-opacity-30">
        <div class="mr-6 relative">
          <img class="w-16 h-16 object-cover rounded-full border-2 border-green-400 hover:border-blue-400 transition-all duration-300 transform hover:scale-110" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=8&amp;w=300&amp;h=300&amp;q=80" alt="">
          <div class="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
        </div>
        <div class="text-left">
          <h3 class="text-2xl font-black font-heading tracking-wider text-blue-400">DANNY BAILEY</h3>
          <p class="text-lg text-gray-400">TIMESTAMP: 2025.02.26</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="h-96 mb-12 lg:mb-16 relative">
    <div class="absolute inset-0 bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 opacity-20"></div>
    <img class="w-full h-full object-cover filter contrast-125 brightness-110" src="https://images.unsplash.com/photo-1458080767772-b1011d305557?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1043&amp;q=80" alt="">
    <div class="absolute inset-0 border-4 border-blue-400 border-opacity-30"></div>
    <div class="absolute top-4 right-4 bg-black bg-opacity-80 px-3 py-1 text-green-400 text-xs tracking-wider">
      STATUS: ONLINE
    </div>
  </div>
  
  <div class="container px-4 mx-auto relative z-10">
    <div class="max-w-2xl mx-auto relative">
      <div class="absolute -left-4 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-400 via-purple-500 to-green-400 opacity-50"></div>
      
      <p class="mb-6 lg:mb-8 text-lg leading-loose lg:text-xl lg:leading-relaxed text-gray-400 pl-8 border-l-2 border-blue-400 border-opacity-30 hover:border-opacity-60 transition-all duration-300">
        Initializing neural pathways from quantum wireframes received through encrypted channels. Primary system queries detected:
      </p>
      
      <p class="mb-6 lg:mb-8 text-lg leading-loose lg:text-xl lg:leading-relaxed text-gray-400 pl-8 border-l-2 border-purple-500 border-opacity-30 hover:border-opacity-60 transition-all duration-300">
        These protocol violations resulted in critical system delays and excessive bandwidth consumption during inter-node communications. Error log indicates preventable failures due to insufficient wireframe specifications.
      </p>
      
      <div class="relative p-6 bg-gradient-to-r from-gray-900 to-black border border-green-400 border-opacity-30 rounded-lg hologram-effect">
        <div class="absolute top-2 right-2 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
        <p class="text-lg leading-loose lg:text-xl lg:leading-relaxed text-gray-400">
          Current status: As lead UX architect, system analysis reveals that many designers fail to recognize wireframes as dual-purpose entities - both creative matrices and technical specifications. We maintain responsibility for innovative design concepts while simultaneously generating precise product documentation. Memory overflow warnings indicate detail tracking can become complex. To optimize performance, I compiled comprehensive wireframing protocols into a single executable checklist for continuous reference during development cycles. Now sharing this compiled knowledge with global network to restore creative efficiency.
        </p>
        <div class="absolute -bottom-1 -right-1 w-4 h-4 border-2 border-blue-400 bg-black animate-pulse"></div>
      </div>
      
      <div class="mt-8 grid grid-cols-3 gap-2 text-xs">
        <div class="bg-blue-400 bg-opacity-20 p-2 rounded text-blue-400 text-center">PROC: 94%</div>
        <div class="bg-purple-500 bg-opacity-20 p-2 rounded text-purple-500 text-center">MEM: 78%</div>
        <div class="bg-green-400 bg-opacity-20 p-2 rounded text-green-400 text-center">NET: 142ms</div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ likes: 256, maxLike: 1, comments: 10 }" class="relative py-12 md:py-24 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <a class="inline-flex items-center font-bold text-white hover:text-teal-600" href="#">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.4167 10H5M5 10L10 5M5 10L10 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="ml-2">Back to Blog</span>
        </a>
      </div>
      <div class="w-full lg:w-2/3 px-4 pb-16">
        <div class="flex mb-4 items-center">
          <span class="text-base text-gray-400">20 Jul 2023</span>
          <span class="mx-3">
            <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="2" fill="#4B6354"></circle></svg>
          </span>
          <span class="text-base text-gray-400">4 min read</span>
        </div>
        <h2 class="font-heading tracking-tight text-4xl sm:text-5xl font-bold text-white mb-8">How We Built AI-Collections: Wrapping Up</h2>
        <div class="flex items-center">
          <img class="block w-12 h-12 rounded-full object-cover" src="aurora-assets/blog/avatar-medium.png" alt="">
          <div class="ml-2">
            <span class="block text-base font-semibold text-white">Max Ranver</span>
            <span class="block text-sm font-medium text-gray-400">Content Writer, Aurora</span>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <h4 class="font-bold text-white mb-5">TABLE OF CONTENTS</h4>
        <ul>
          <li class="mb-5"><a class="inline-block px-6 text-lg font-medium text-yellowGreen-600" href="#">Introduction</a></li>
          <li class="mb-5"><a class="inline-block px-6 text-lg font-medium text-gray-400 hover:text-yellowGreen-600" href="#">General content</a></li>
          <li class="mb-5"><a class="inline-block px-6 text-lg font-medium text-gray-400 hover:text-yellowGreen-600" href="#">Additional reading</a></li>
          <li class="mb-5"><a class="inline-block px-6 text-lg font-medium text-gray-400 hover:text-yellowGreen-600" href="#">Conclusion</a></li>
        </ul>
      </div>
      <div class="w-full lg:w-2/3 px-4">
        <div class="mb-12 pb-12 border-b border-gray-700">
          <img class="block mb-16 w-full object-cover rounded-xl" src="aurora-assets/content/folders-dark.png" alt="">
          <div class="mb-12">
            <h4 class="text-3xl text-white font-bold mb-6">Introduction</h4>
            <p class="text-lg text-gray-400 mb-6">As we come to the end of our journey in building AI-Collections, we reflect on the incredible experience and the technological advancements that have shaped this groundbreaking project. From its inception, our goal was to create a sophisticated system that leverages the power of artificial intelligence to curate and organize digital collections seamlessly. The journey involved a dedicated team of engineers, data scientists, and designers who collaborated tirelessly to bring this vision to life. We'll delve into the challenges we faced, the technologies we utilized, and the exciting potential AI-Collections holds for the future.</p>
            <span class="block text-lg text-gray-400">1. Defining the Vision</span>
            <span class="block text-lg text-gray-400">2. Team Collaboration</span>
            <span class="block text-lg text-gray-400">3. Data Acquisition and Management</span>
          </div>
          <div class="mb-12">
            <h4 class="text-3xl text-white font-bold mb-6">General content</h4>
            <p class="text-lg text-gray-400 mb-6">The development process was marked by countless hours of research, prototyping, and iteration. We explored various machine learning algorithms and deep neural network architectures to ensure optimal performance and accuracy in content classification. Through rigorous testing and fine-tuning, we trained our AI model to recognize patterns, categorize assets, and recommend relevant collections with impressive precision.</p>
            <div class="flex mb-6">
              <span class="block mr-2 text-lg text-gray-400">1.</span>
              <div>
                <p>
                  <span class="inline-block mr-1 text-lg text-white font-bold">Defining the Vision:</span>
                  <span class="text-lg text-gray-400">We begin by discussing the initial vision behind AI-Collections and the objectives we aimed to achieve. We highlight the need for a sophisticated content curation system that leverages AI capabilities to enhance user experiences and streamline information discovery.</span>
                </p>
              </div>
            </div>
            <div class="flex mb-6">
              <span class="block mr-2 text-lg text-gray-400">2.</span>
              <div>
                <p>
                  <span class="inline-block mr-1 text-lg text-white font-bold">Team Collaboration:</span>
                  <span class="text-lg text-gray-400">Successful projects require effective teamwork. We emphasize the importance of collaboration and detail how our team of experts, including developers, data scientists, and designers, worked together to bring AI-Collections to life. We share insights on how we fostered a creative and innovative environment throughout the development process.</span>
                </p>
              </div>
            </div>
            <div class="flex">
              <span class="block mr-2 text-lg text-gray-400">3.</span>
              <div>
                <p>
                  <span class="inline-block mr-1 text-lg text-white font-bold">Data Acquisition and Management:</span>
                  <span class="text-lg text-gray-400">Content demands a reliable and extensive dataset. We provide an overview of the strategies we employed to gather and manage the data required for AI-Collections. This includes sourcing relevant content, data cleaning, and ensuring data quality and diversity.</span>
                </p>
              </div>
            </div>
          </div>
          <div class="mb-12">
            <h4 class="text-3xl text-white font-bold mb-6">Additional reading</h4>
            <p class="text-lg text-gray-400 mb-6">Design played a crucial role in the development of AI-Collections. We wanted to create an intuitive user interface that empowers users to effortlessly manage their digital assets. Our design team conducted extensive user research and feedback sessions to understand the pain points and needs of content creators. The result is a sleek, user-friendly interface that allows for seamless navigation, quick bookmarking, and efficient organization of assets.</p>
            <p class="text-lg text-gray-400">Throughout the process, we prioritized data privacy and security. We implemented robust encryption protocols and strict access controls to ensure that sensitive user information remains protected at all times. Building trust with our users has been of utmost importance, and we are committed to maintaining a secure environment for their valuable assets.</p>
          </div>
          <div class="mb-12">
            <h4 class="text-3xl text-white font-bold mb-6">Conclusion</h4>
            <p class="text-lg text-gray-400">As we wrap up the development phase, we're excited about the potential AI-Collections holds for content creators, marketers, and businesses alike. Our AI-powered solution brings a new level of efficiency and productivity to digital asset management, freeing up valuable time and resources for creativity and innovation. We're grateful for the opportunity to contribute to the ever-evolving landscape of AI technology, and we look forward to seeing how AI-Collections transforms the way assets are curated and organized in the digital world.</p>
          </div>
          <div class="py-4 px-6 border border-gray-800 bg-gray-800 rounded-lg">
            <span class="inline-block mr-2 text-lg text-gray-300">Interested in more tips like this?</span>
            <a class="group inline-flex items-center text-base font-bold text-yellowGreen-600 hover:text-yellowGreen-400 transition duration-100" href="#">
              <span class="mr-2">Subscribe to our newsletter</span>
              <span class="transform group-hover:translate-x-1 transition duration-100">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4.99984 10H15.4165M15.4165 10L10.4165 5M15.4165 10L10.4165 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
            </a>
          </div>
        </div>
        <div class="flex items-center justify-center">
          <a x-on:click.prevent="likes = likes + maxLike, maxLike = 0" class="group inline-flex mr-12 items-center text-white hover:text-yellowGreen-600" href="#">
            <div class="flex items-center justify-center h-16 w-16 bg-gray-800 rounded-full">
              <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.9724 20H4.6C4.26863 20 4 19.7314 4 19.4V9.6C4 9.26863 4.26863 9 4.6 9H7.36762C8.07015 9 8.72116 8.6314 9.0826 8.02899L11.793 3.51161C12.3779 2.53688 13.7554 2.44422 14.4655 3.33186C14.8002 3.75025 14.9081 4.30635 14.7541 4.81956L13.7317 8.22759C13.6162 8.61256 13.9045 9 14.3064 9H18.8815C20.2002 9 21.158 10.254 20.811 11.5262L18.9019 18.5262C18.6646 19.3964 17.8743 20 16.9724 20Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
                <path d="M7.5 20L7.5 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <span x-text="likes" class="ml-3">256</span>
          </a>
          <a class="group inline-flex items-center text-white hover:text-yellowGreen-600" href="#">
            <div class="flex items-center justify-center h-16 w-16 bg-gray-800 rounded-full">
              <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.5 22C18.0228 22 22.5 17.5228 22.5 12C22.5 6.47715 18.0228 2 12.5 2C6.97715 2 2.5 6.47715 2.5 12C2.5 13.8214 2.98697 15.5291 3.83782 17L3 21.5L7.5 20.6622C8.97087 21.513 10.6786 22 12.5 22Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <span x-text="comments" class="ml-3">10</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-20 md:pt-30 bg-purple-50 overflow-hidden">
  <div class="relative container px-4 mx-auto">
    <img class="hidden lg:block animate-bouncingSlow absolute bottom-0 right-0 -mb-6 xl:mr-20 h-full" src="suncealand-assets/background/black-red-lines.svg" alt="">
    <div class="relative flex flex-wrap -mx-4 lg:pt-24 items-start">
      <div class="w-full lg:w-2/5 px-4 mb-32 lg:mb-0">
        <div class="max-w-md xl:max-w-lg mx-auto lg:mx-0">
          <div class="inline-flex px-5 py-2 items-center mb-8 bg-white rounded-full">
            <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
            <span class="uppercase text-sm font-medium tracking-tight">Content</span>
          </div>
          <h1 class="text-5xl sm:text-7xl xl:text-8xl font-heading font-semibold mb-12">What you need, when you need it</h1>
          <p class="text-2xl mb-12">Record your audio and upload it now.</p>
          <ul class="mb-18">
            <li class="flex mb-4 items-center">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9492" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9492 9.63605)" fill="white"></rect><rect x="7.62891" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.62891 17.0431)" fill="white"></rect></svg>
              <span class="ml-8 text-lg">Quisque euismod</span>
            </li>
            <li class="flex items-center">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9492" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9492 9.63605)" fill="white"></rect><rect x="7.62891" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.62891 17.0431)" fill="white"></rect></svg>
              <span class="ml-8 text-lg">Nunc iaculis quis risus at tristique</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="w-full lg:w-3/5 px-4">
        <div>
          <div class="relative z-10 pb-20 lg:pb-52">
            <img class="block mx-auto w-full max-w-lg" src="suncealand-assets/images/frame-apps-avatar.png" alt="">
            <img class="absolute top-0 right-0 sm:-mr-20 mt-64" src="suncealand-assets/images/join-box.png" alt="">
          </div>
          <div class="relative animate-bouncingSlow">
            <img class="lg:hidden absolute bottom-0 left-1/2 -mb-32 sm:-mb-6 transform -translate-x-1/2" src="suncealand-assets/background/black-red-lines.svg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="p-6" x-data="{ activeSlide: 1 }">
    <div class="container mx-auto px-4">
        <div class="p-8 rounded-2xl border border-gray-200">
            <div class="flex justify-between items-center flex-wrap mb-8 gap-4">
                <span class="inline-block py-1 px-3 bg-blue-100 rounded-md text-xs font-bold text-blue-500 uppercase">Announcements</span>
                <div class="flex gap-3">
                    <button x-on:click="activeSlide=1" class="rounded-full bg-blue-200 w-1.5 h-1.5" :class="{'w-6 bg-blue-500': activeSlide == 1, 'w-1.5 bg-blue-200': activeSlide != 1}"></button>
                    <button x-on:click="activeSlide=2" class="rounded-full bg-blue-200 w-1.5 h-1.5" :class="{'w-6 bg-blue-500': activeSlide == 2, 'w-1.5 bg-blue-200': activeSlide != 2}"></button>
                    <button x-on:click="activeSlide=3" class="rounded-full bg-blue-200 w-1.5 h-1.5" :class="{'w-6 bg-blue-500': activeSlide == 3, 'w-1.5 bg-blue-200': activeSlide != 3}"></button>
                    <button x-on:click="activeSlide=4" class="rounded-full bg-blue-200 w-1.5 h-1.5" :class="{'w-6 bg-blue-500': activeSlide == 4, 'w-1.5 bg-blue-200': activeSlide != 4}"></button>
                </div>
            </div>
            <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="flex -mx-4 transition-transform duration-500" style="transform: translateX(-0%)">
                    <div class="flex-shrink-0 px-4 w-full">
                        <h6 class="font-semibold text-blue-900 mb-4">Leave it all at that place! 😎</h6>
                        <p class="text-gray-500 text-sm mb-8">My wealth and treasures? If you want it, you can have it! Search for it! I left it all at that place!.</p>
                    </div>
                    <div class="flex-shrink-0 px-4 w-full">
                        <h6 class="font-semibold text-blue-900 mb-4">The Ultimate Legacy Awaits!</h6>
                        <p class="text-gray-500 text-sm mb-8">My journey and secrets? They’re yours to uncover! Seek them out! I’ve left everything at that one special place!</p>
                    </div>
                    <div class="flex-shrink-0 px-4 w-full">
                        <h6 class="font-semibold text-blue-900 mb-4">Find It, If You Dare!</h6>
                        <p class="text-gray-500 text-sm mb-8">The riches, the glory? They belong to whoever dares! It’s all hidden where my story ends—search and make it yours!</p>
                    </div>
                    <div class="flex-shrink-0 px-4 w-full">
                        <h6 class="font-semibold text-blue-900 mb-4">It’s Yours for the Taking!</h6>
                        <p class="text-gray-500 text-sm mb-8">My fortune and fame? They’re out there, waiting for you! Look for the mark—I left everything behind for the bold and brave!</p>
                    </div>
                </div>
            </div>
            <div class="pt-6 border-t border-gray-200 flex justify-between items-center flex-wrap gap-4">
                <p class="text-gray-500 text-sm">Due date: 15 May, 2021</p>
                <a href="#" class="inline-flex items-center justify-center w-full sm:w-auto px-6 py-2 rounded-2xl text-white text-sm font-medium shadow-sm bg-blue-500 hover:bg-blue-600 focus:ring focus:ring-blue-300 transition duration-200">
                    <span class="mr-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M4.50012 1.5H11.5001C11.6327 1.5 11.7599 1.55268 11.8537 1.64645C11.9474 1.74021 12.0001 1.86739 12.0001 2V4.83333C12.0001 4.94152 11.965 5.04679 11.9001 5.13333L10.6001 6.86667C10.5352 6.95321 10.5001 7.05848 10.5001 7.16667V14C10.5001 14.1326 10.4474 14.2598 10.3537 14.3536C10.2599 14.4473 10.1327 14.5 10.0001 14.5H6.00012C5.86751 14.5 5.74034 14.4473 5.64657 14.3536C5.5528 14.2598 5.50012 14.1326 5.50012 14V7.16667C5.50012 7.05848 5.46503 6.95321 5.40012 6.86667L4.10012 5.13333C4.03521 5.04679 4.00012 4.94152 4.00012 4.83333V2C4.00012 1.86739 4.0528 1.74021 4.14657 1.64645C4.24034 1.55268 4.36751 1.5 4.50012 1.5V1.5Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M8.00012 7.5V9.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M4.00012 4H12.0001" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </span>
                    <span>View details</span>
                </a>
            </div>
        </div>
    </div>
</section>