Indented Media Panels

This tailwind example is contributed by Sherry Lynne, on 20-Aug-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author Sherry Lynne

Tailwind v3.4 184 1

Fork Fullscreen

<div class="font-light bg-white w-screen p-5 max-w-7xl mx-auto">
  <h1 class="text-4xl lg:text-5xl mb-5">Media Panels</h1>
  <p class="mb-5">Changes from current design: dropped the eyebrow (date and/or category) since it has been removed from other promo components, and 
    2 halves of panel no longer flip 1st/2nd position at large breakpoint because pushing a 2nd position video into first position on mobile
    causes incorrect tab order. </p>
  <div class="bg-sky-700 text-white text-lg p-8 lg:p-10 lg:pl-0 lg:ml-10 xl:py-14 xl:ml-14 lg:overflow-visible">
    <div class="grid lg:grid-cols-2 lg:gap-8 lg:-ml-10 xl:-ml-14">
      <div class="mb-8 lg:mb-0 flex flex-col justify-center">
        <div class="aspect-video">
          <iframe width="100%" height="100%" src="https://www.youtube.com/embed/q_QyaPhykuI?si=oXetWfcWNddv8jJP"
            title="SAMPLE VIDEO" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>
        </div>
      </div>
      <div class="lg:py-5 flex flex-col justify-center lg:px-5">
          <h2 class="text-2xl lg:text-3xl mb-4 flex items-center">
            Indented Panel (with Video first)
          </h2>
          <p class="pb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper dui eget leo facilisis
            facilisis. Nam aliquet eu ligula a commodo.</p>
            
          
          <p><a class="font-normal px-6 py-3 my-3 lg:my-1 inline-block border border-blue-950 text-blue-950 outline-solid outline-3 outline-blue-950 
          hover:ring-1 [&:not(.button+.button)]:ring-blue-950 [.button+&]:ml-3 [&:not(.button+.button)]:border-transparent  ring-current
          [&:not(.button+.button)]:text-white [&:not(.button+.button)]:bg-blue-950 rounded-full [&:not(.button+.button)]:hover:bg-blue-950
          focus:ring-offset-1 transition-colors duration-200 text-sm" href="#">CTA Link</a>
          </p>
      </div>
    </div>
  </div>
    <hr class="my-5">
  <div class="bg-neutral-200 text-black text-lg p-8 lg:p-10 lg:pr-0 lg:mr-10 xl:py-14 xl:mr-14 lg:overflow-visible">
    <div class="grid lg:grid-cols-2 lg:gap-8 lg:-mr-10 xl:-mr-14">
      <div class="flex flex-col justify-center lg:px-5">
        <h2 class="text-2xl lg:text-3xl mb-4 flex items-center">
          Indented Panel (with Video second)
        </h2>
        <p class="pb-6 font-medium">When content is taller than media item, both sides align vertically at large breakpoints.</p>
        <p class="pb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper dui eget leo facilisis
            facilisis. Nam aliquet eu ligula a commodo.</p>
        <p class="pb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper dui eget leo facilisis
            facilisis. Nam aliquet eu ligula a commodo.</p>
        <p><a class="font-normal px-6 py-3 my-3 lg:my-1 inline-block border border-blue-950 text-blue-950 outline-solid outline-3 outline-blue-950 
        hover:ring-1 [&:not(.button+.button)]:ring-blue-950 [.button+&]:ml-3 [&:not(.button+.button)]:border-transparent  ring-current
        [&:not(.button+.button)]:text-white [&:not(.button+.button)]:bg-blue-950 rounded-full [&:not(.button+.button)]:hover:bg-blue-950
        focus:ring-offset-1 transition-colors duration-200 text-sm" href="#">CTA Link</a>
        </p>
      </div>
      <div class="mt-8 lg:mt-0 flex flex-col justify-center">
        <div class="aspect-video">
          <iframe width="100%" height="100%" src="https://www.youtube.com/embed/HuMM9d6K2ac?si=U1nYvyWVeY0Srma8"
            title="SAMPLE VIDEO 2" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>
        </div>
      </div>
    </div>
  </div>
  <hr class="my-5">
  <div class="bg-indigo-900 text-white text-lg p-8 lg:overflow-visible">
    <div class="grid lg:grid-cols-2 lg:gap-8 xl:px-6">
      <div class="mb-8 lg:mb-0 flex items-center">
        <img src="https://placecats.com/770/500" class="w-full" alt="a cat" />
      </div>
      <div class="lg:px-5 flex flex-col justify-center">
          <h2 class="text-2xl lg:text-3xl mb-4 flex items-center">
            Standard Panel (with Media first)
          </h2>
        <p class="pb-6 font-medium">When content is taller than media item, both sides align vertically at large breakpoints.</p>
        <p class="pb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper dui eget leo facilisis
          facilisis. Nam aliquet eu ligula a commodo.</p>
          <p class="pb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper dui eget leo facilisis
            facilisis. Nam aliquet eu ligula a commodo.</p>
          <p class="pb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper dui eget leo facilisis
            facilisis. Nam aliquet eu ligula a commodo.</p>
      </div>
    </div>
  </div>
  <hr class="my-5">
  <div class="bg-lime-500 text-black p-8 text-lg">
    <div class="grid lg:grid-cols-2 lg:gap-8">
      <div class="lg:px-5 flex flex-col justify-center">
        <h2 class="text-2xl lg:text-3xl mb-4 flex items-center">
          Standard Panel (with Media second)
        </h2>
        <p class="pb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper dui eget leo facilisis
          facilisis. Nam aliquet eu ligula a commodo.</p>
          
        <p><a class="font-normal px-6 py-3 my-3 lg:my-1 inline-block border border-blue-950 text-blue-950 outline-solid outline-3 outline-blue-950 
        hover:ring-1 [&:not(.button+.button)]:ring-blue-950 [.button+&]:ml-3 [&:not(.button+.button)]:border-transparent  ring-current
        [&:not(.button+.button)]:text-white [&:not(.button+.button)]:bg-blue-950 rounded-full [&:not(.button+.button)]:hover:bg-blue-950
        focus:ring-offset-1 transition-colors duration-200 text-sm" href="#">Optional CTA</a>
        </p>
      </div>
      <div class="mt-8 lg:mt-0 flex items-center">
        <img src="https://placecats.com/770/480" class="w-full" alt="a cat" />
      </div>
    </div>
  </div>
</div>

Related Examples

profile

Anonymous

1 month ago

4
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
Order Management Data Table
A responsive order management table built with Tailwind CSS and DataTables. It includes a navigation bar, sortable data table, order progress indicators, file upload controls, and a footer. The component is suitable for admin dashboards, production workflows, and project tracking interfaces. Tags: Table, Data Table, Dashboard, Admin Panel, File Upload, Progress Bar, Responsive, Tailwind CSS

Alla Telegina

2 months ago

67
3D Count downer

Hasan AlDoy (McDoy)

6 months ago

321
Cockatoo

Lokesh H

3 months ago

132
Career Page
This is a career page component built in tailwind

Deepak Sharma

1 year ago

1.7k
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
dashboard2

John

4 weeks ago

15
Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

nejaa badr

2 years ago

2.4k
Card blog
Targeta para blog

Raul antonio de la cruz hernandez

1 year ago

749
Restaurant menu card

Anonymous

2 years ago

4.5k
Product Card
e-commerce product card

JUGENDRA GANGWAR

2 hours ago

2