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 147

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

masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

rohit whyphy

1 year ago

1.6k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

5 months ago

612
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Hamza Atig

1 year ago

1.7k
Aurora Spinner
Aurora Spinner using tailwindcss

Deepak Kumar Chouhan

1 year ago

1.8k
machine
tell you how your MAC pc work

gidy

10 months ago

748
admindashboard
creates a responsive, interactive admin dashboard using Tailwind CSS, Font Awesome, Chart.js, and custom JavaScript animations. It's called "Materially Dashboard" and is designed for presenting key statistics and analytics data in a visually appealing manner.

ishimwe shadad

1 year ago

1.4k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Hamza Atig

1 year ago

2.1k
Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.6k
Contact Page

Sedat Kumcu

1 year ago

2.1k
Snake Game tailwind
snake game

QQ-VVN

1 year ago

1.4k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

3 months ago

230
Contact us Form with Responsive

KULDEEP

1 year ago

1.1k