Full Width Feature UI

Live Preview
<div
        class="bg-indigo-600 rounded-[4rem] mx-6 my-20 p-12 md:p-24 overflow-hidden relative shadow-2xl shadow-indigo-200">
        <div class="absolute -right-20 -top-20 w-80 h-80 bg-white/10 rounded-full blur-3xl"></div>
        <div class="max-w-4xl relative z-10 flex flex-col md:flex-row items-center gap-16">
            <div class="text-center md:text-left flex-1">
                <span class="text-white/70 font-black uppercase tracking-[0.3em] text-[10px] mb-6 block">Our
                    Methodology</span>
                <h2 class="text-5xl md:text-7xl font-black text-white italic tracking-tighter leading-none mb-10">SPEED
                    IS THE <br> NEW <span
                        class="underline decoration-white/20 decoration-[12px] underline-offset-8">SILVER.</span></h2>
                <div class="flex flex-wrap gap-4 justify-center md:justify-start">
                    <button
                        class="bg-white text-indigo-600 px-10 py-5 rounded-3xl font-black text-xs uppercase tracking-widest hover:bg-slate-100 transition-all shadow-xl shadow-indigo-900/20 active:scale-95">View
                        Blueprint</button>
                    <button
                        class="bg-indigo-700 text-white border border-white/20 px-10 py-5 rounded-3xl font-black text-xs uppercase tracking-widest hover:bg-indigo-800 transition-all active:scale-95">Whitepaper</button>
                </div>
            </div>
            <div
                class="hidden lg:block w-72 h-96 bg-white/5 rounded-full border-4 border-white/10 -rotate-12 group hover:rotate-0 transition-transform duration-700">
            </div>
        </div>
    </div>

Related components

More items from the merged UI library.

View all