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

chatbot
is my chatbot

Omer fils ELENGA

10 months ago

1.3k
Password Generator
This is a simple and responsive Password Generator built with HTML, Vanilla JavaScript, and Tailwind CSS. It allows users to create secure passwords by selecting custom options such as length, uppercase letters, lowercase letters, numbers, and symbols. Ideal for developers or users looking for a fast and customizable password tool.

SAURAV SINGH

1 year ago

1.4k
htmlcss3

Anonymous

1 year ago

1k
Simple Hero Section
Hero Section using Tailwind

Ahita Bisma Adlula

1 year ago

1.9k
tab3
table

Anonymous

1 week ago

84
Stacked Checkboxes

kishan pc

2 years ago

3.9k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.2k
Icon group

Conan Hilton

3 years ago

10.3k
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

9 months ago

741
Login page

Reuben Enahoro

1 year ago

2.8k
Periodic Table with Tailwind CSS

Michael Andreuzza

2 years ago

3k
Organization Hierarchy list

Anonymous

3 years ago

9.8k