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 233

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

tiny fishing
fun fishing

Abel Wright

7 months ago

235
Old Times Pomodorro
When the love of time management goes beyond the management of love over time. ~ Rogue agent

Hasan AlDoy (McDoy)

5 months ago

425
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Anonymous

3 weeks ago

68
default template

Anonymous

1 year ago

751
Homepage event

Anonymous

1 year ago

1.2k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

SHARIFUL ISLAM

1 year ago

1.8k
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Coastal UI

1 year ago

2.2k
color blur
blur

BocchiChan

1 year ago

2.6k
loginForm2
form

Anonymous

4 weeks ago

169
Energy Efficiency Program - Oklahoma
Code for new IT proposal

Mario Williams

1 year ago

850
Soft Lights & Slow Beats
Sink into the tranquil rhythms of a Sunday afternoon. This playlist blends soft melodies and gentle beats to create a mysterious yet comforting atmosphere — perfect for relaxing, reflecting, or simply unwinding as the day fades away.

Bonimater

1 year ago

1.1k
pages / slides

MD Fardous Alom

1 year ago

2.3k