Banner Page

Community Banner section code

This tailwind example is contributed by Sayista Yazdani, on 31-Jul-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author Sayista Yazdani

Tailwind v3.4 248

Fork Fullscreen

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
            
            
            <div class="lg:col-span-6 text-left space-y-6 order-1 lg:order-1">
                <div class="inline-flex items-center space-x-2 bg-[#FFBD59]/5 border border-[#FFBD59]/20 px-4 py-1.5 rounded-full text-xs font-semibold text-[#FFBD59] uppercase tracking-wider">
                    <span>Connect & Learn</span>
                </div>
                <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-tight">
                    Join Our <br><span class="text-[#FFBD59]">Learning Communities</span>
                </h2>
                <p class="text-sm sm:text-base text-slate-600 dark:text-slate-400 leading-relaxed">
                    Don't study alone. Connect with 10,000+ serious MBA aspirants across our WhatsApp group and YouTube channels. Get instant daily practice sets, exam alerts, and concept videos.
                </p>

<a href="https://www.youtube.com" target="_blank" class="flex-grow sm:flex-none inline-flex items-center justify-center space-x-3 bg-slate-900 hover:bg-slate-950 dark:bg-white dark:hover:bg-slate-100 text-white dark:text-[#0A0F18] font-extrabold px-8 py-4 rounded-xl text-sm border border-slate-700 dark:border-slate-200 transition-all">
                        
                        <svg class="w-5 h-5 text-red-500 fill-current" viewBox="0 0 24 24">
                            <path d="M23.498 6.163a3.003 3.003 0 00-2.11-2.107C19.524 3.543 12 3.543 12 3.543s-7.524 0-9.388.513a3.003 3.003 0 00-2.11 2.107C0 8.033 0 12 0 12s0 3.967.502 5.837a3.003 3.003 0 002.11 2.107c1.864.513 9.388.513 9.388.513s7.524 0 9.388-.513a3.003 3.003 0 002.11-2.107C24 15.967 24 12 24 12s0-3.967-.502-5.837zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                        </svg>
                        <span>Subscribe Our Channel</span>
                    </a>
                </div>
            </div>

<div class="lg:col-span-6 relative flex justify-center items-center scale-90 sm:scale-100 py-10 lg:py-0 order-2 lg:order-2">
                <div class="absolute left-[5%] top-[10%] w-10 h-10 bg-white dark:bg-[#212529] border border-slate-200 dark:border-slate-800 rounded-xl flex items-center justify-center shadow-lg animate-bounce z-20">
                    <svg class="w-5 h-5 text-red-500 fill-current" viewBox="0 0 24 24">
                        <path d="M23.498 6.163a3.003 3.003 0 00-2.11-2.107C19.524 3.543 12 3.543 12 3.543s-7.524 0-9.388.513a3.003 3.003 0 00-2.11 2.107C0 8.033 0 12 0 12s0 3.967.502 5.837a3.003 3.003 0 002.11 2.107c1.864.513 9.388.513 9.388.513s7.524 0 9.388-.513a3.003 3.003 0 002.11-2.107C24 15.967 24 12 24 12s0-3.967-.502-5.837zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                    </svg>
                </div>
                <div class="absolute right-[5%] bottom-[15%] w-10 h-10 bg-white dark:bg-[#212529] border border-slate-200 dark:border-slate-800 rounded-xl flex items-center justify-center shadow-lg animate-pulse z-20">
 
                    <svg class="w-5 h-5 text-blue-500 fill-current" viewBox="0 0 20 20">
                        <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 9.333a1.993 1.993 0 00-.8 1z"/>
                    </svg>
                </div>
                <div class="absolute left-[10%] bottom-[10%] w-10 h-10 bg-white dark:bg-[#212529] border border-slate-200 dark:border-slate-800 rounded-xl flex items-center justify-center shadow-lg animate-bounce z-20">
                    
                    <svg class="w-5 h-5 text-emerald-500 fill-current" viewBox="0 0 24 24">
                        <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.5-5.729-1.452L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.625 1.451 5.489.002 9.961-4.47 9.964-9.959.002-2.66-1.033-5.159-2.914-7.04C16.43 1.765 13.934.73 11.277.73 5.79.73 1.319 5.2 1.316 10.69c-.001 1.574.413 3.111 1.2 4.47l-.766 2.796 2.863-.751zm11.308-5.32c-.29-.145-1.71-.845-1.975-.941-.266-.097-.46-.145-.652.145-.19.29-.74.941-.907 1.134-.166.19-.33.21-.62.067-.29-.145-1.226-.452-2.336-1.442-.864-.77-1.448-1.72-1.618-2.012-.17-.29-.018-.447.127-.591.13-.13.29-.337.435-.506.145-.17.19-.29.29-.482.096-.19.047-.36-.026-.506-.073-.145-.652-1.573-.893-2.152-.235-.565-.472-.489-.652-.498-.17-.008-.362-.01-.554-.01-.19 0-.506.07-.77.36-.265.29-1.01.986-1.01 2.404 0 1.417 1.03 2.79 1.173 2.986.143.195 2.025 3.094 4.907 4.336.685.296 1.22.472 1.637.605.689.22 1.316.19 1.81.116.552-.083 1.71-.698 1.95-1.372.24-.674.24-1.253.17-1.372-.073-.12-.266-.214-.555-.36z"/>
                    </svg>
                </div>

<div class="relative w-[210px] h-[390px] bg-slate-900 border-[6px] border-slate-950 dark:border-slate-800 rounded-[36px] shadow-2xl overflow-hidden z-10 rotate-[-8deg] translate-x-[20px] transition-transform hover:rotate-0 hover:z-20 duration-300">
                    <div class="w-full h-full bg-[#0b141a] flex flex-col justify-between text-left text-white text-[9px] font-sans">
                        <div class="bg-[#075e54] p-2 flex items-center space-x-2 pt-4">
                            
                              <img src="{{ asset('images/logo.png') }}" alt="" class="h-6 w-auto object-contain rounded-lg shadow-md shadow-indigo-500/10">
                            <div class="flex-grow">
                                <h4 class="font-extrabold text-[8px] truncate leading-none">Sayista Community 🔥</h4>
                                <span class="text-[6px] text-slate-200">only admins can send messages</span>
                            </div>
                        </div>

<div class="flex-grow p-2 space-y-2 overflow-y-auto">
                            <div class="text-center"><span class="bg-[#182229] text-slate-400 px-2 py-0.5 rounded text-[5px]">TODAY</span></div>
                            
                            <div class="bg-[#056162] text-white p-2 rounded-lg max-w-[90%] ml-auto space-y-1.5 shadow">
                                <div class="bg-[#0b141a] rounded overflow-hidden p-1 border border-slate-700">
                                    <div class="aspect-video bg-indigo-950 flex items-center justify-center font-black text-[#FFBD59] text-[8px] text-center p-1">
                                        CAT 2026<br>DILR BOOSTER<br>SERIES
                                    </div>
                                    <div class="p-1 font-bold text-[7px]">Daily DILR Practice Set - 1</div>
                                </div>
                                <p class="text-[7px]">DILR Daily Quiz is LIVE! Click the link below to attempt now.</p>
                                <a href="#" class="text-[#FFBD59] underline text-[6px] block">https://</a>
                                <span class="text-[5px] text-slate-400 float-right mt-1">9:30 PM ✓✓</span>
                            </div>
                        </div>
                    </div>
                </div>

<div class="relative w-[210px] h-[390px] bg-slate-900 border-[6px] border-slate-950 dark:border-slate-800 rounded-[36px] shadow-2xl overflow-hidden z-10 rotate-[8deg] translate-x-[-20px] transition-transform hover:rotate-0 hover:z-20 duration-300">
                    <div class="w-full h-full bg-[#0f0F0f] flex flex-col text-left text-white text-[9px] font-sans">
                        <div class="h-3 bg-black"></div>
                        
                        <div class="bg-[#FFBD59] h-12 flex flex-col justify-center items-center text-center p-1 relative">
                            <span class="text-[#0A0F18] font-black text-[8px] leading-tight">CAT 2026 PREPARATION</span>
                            <span class="text-[5px] text-[#0A0F18] font-bold">BY ELITE IIM ALUMNI</span>
                        </div>

<div class="p-2 space-y-1 pb-1">
                            <div class="flex items-center space-x-2">
                                
                                <a href="/" class="flex items-center py-2">
                                    <img src="{{ asset('images/logo.png') }}" alt="" class="h-10 w-auto object-contain rounded-lg shadow-md shadow-indigo-500/10">
                                </a>
                                <div>
                                    <h4 class="font-extrabold text-[8px] leading-none">Sayista Yazdani</h4>
                                    <span class="text-[6px] text-slate-300">@Sayistayazdni • 250K+ subs</span>
                                </div>
                            </div>
                            <button class="w-full py-1 bg-white/10 hover:bg-white/20 text-white font-bold rounded-full text-[7px] flex items-center justify-center space-x-1 mt-1">
                                <span>Subscribed</span>
                                <span class="text-[7px]">🔔</span>
                            </button>
                        </div>

<div class="flex border-b border-white/10 text-[6px] text-slate-400 font-bold px-2 py-1 space-x-3">
                            <span class="text-white border-b border-white pb-1">Videos</span>
                            <span>Shorts</span>
                            <span>Live</span>
                            <span>Playlists</span>
                        </div>

<div class="p-2 space-y-2 overflow-y-auto flex-grow">
                            <div class="flex space-x-2">
                                <div class="w-16 h-10 bg-slate-800 rounded overflow-hidden shrink-0 flex items-center justify-center text-[7px] font-bold relative border border-slate-700">
                                    DILR 99.9%
                                    <span class="absolute bottom-0.5 right-0.5 bg-black/80 px-1 py-0.2 rounded text-[5px]">12:40</span>
                                </div>
                                <div>
                                    <h5 class="font-bold text-[7px] leading-tight">CAT 2026 DILR Sets - 15 Practice Lectures</h5>
                                    <span class="text-[6px] text-slate-400 block mt-0.5">2.4K views • 1 day ago</span>
                                </div>
                            </div>
                            <div class="flex space-x-2">
                                <div class="w-16 h-10 bg-slate-800 rounded overflow-hidden shrink-0 flex items-center justify-center text-[7px] font-bold relative border border-slate-700">
                                    QUANT FORMULAS
                                    <span class="absolute bottom-0.5 right-0.5 bg-black/80 px-1 py-0.2 rounded text-[5px]">22:15</span>
                                </div>
                                <div>
                                    <h5 class="font-bold text-[7px] leading-tight">Full Quant Arithmetic Formula Revision</h5>
                                    <span class="text-[6px] text-slate-400 block mt-0.5">5.1K views • 3 days ago</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

</div>

</div>
    </div>
</section>

Related Examples

App Hero Section With header

Abdul Baset Bappy

1 year ago

1.5k
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Hamza Atig

10 months ago

789
Background image section

Marc

2 years ago

7.5k
3d card
the Best 3D card with tailwind css

irahoza daniel

1 year ago

1.5k
background animation
background animation

Anonymous

3 years ago

53.2k
Stepper - Without Buttons

farisubuntu

2 years ago

2.1k
blockquote

Freja Jensen

3 years ago

10.6k
Trend showcase

Anonymous

1 month ago

16
Invoice
Invoice

Ameth Galarcio

2 years ago

3.5k
cards
cards with background animation

Anonymous

3 years ago

12.6k
TASK FAILED SUCCESSFULLY
TradingGoose Ep2 MockUp

Bruz

1 year ago

786
Button
Button with scale animation on hover and translate-y on active

Nabile BABABODI

10 months ago

257