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 114

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

Table Skeleton
Data table skeleton built with Tailwind CSS for admin dashboards and SaaS applications.

JUGENDRA GANGWAR

1 week ago

15
Car booking form
Rental carr booking form to rent a car online

ehmasuk

11 months ago

877
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS

Omer fils ELENGA

2 weeks ago

13
Glassmorphism form

Sophia Baker

3 years ago

19.3k
card

Raul antonio de la cruz hernandez

9 months ago

753
rotate card
rotate card

Tanvir Hasan Bappy (Tanvir)

1 year ago

2.3k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

2k
cancel form

Anonymous

3 weeks ago

6
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Muhammad Rizqi Juniyanto

2 years ago

3.9k
form2

Anonymous

6 days ago

6
Collapsible content

Rafferty Kim

3 years ago

14.7k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Ameth Galarcio

2 years ago

2.6k