CODEWITHSUNDEEP
javascripthtmlcssflexboxtailwind-css
deadcoder0904
deadcoder0904

Reputation: 8683

make responsive flexible images that are rotated on a single line in tailwind css?

i want to recreate this effect that is visible on https://www.tella.tv/ in tailwind css:

tella tv demo

i tried to inspect their source code but i couldn't make it work in my code.

my markup looks like:

<div class="lg:space-x-15 -mr-6 flex items-end justify-end space-x-4 sm:space-x-8 md:space-x-12 lg:-mr-0 lg:justify-center">
  <div class="shadow-gentle-backdrop w-35 lg:w-74 relative flex-shrink-0 rotate-3 transform overflow-hidden rounded-lg opacity-80 transition hover:rotate-0 hover:opacity-100 focus:outline-none focus:ring-2 sm:w-44 md:w-56">
    <img class="" src="https://picsum.photos/300/400" alt="" />
  </div>

  <div class="shadow-gentle-backdrop w-30 sm:w-38 md:w-42 relative flex-shrink-0 -rotate-3 transform overflow-hidden rounded-lg opacity-80 transition hover:rotate-0 hover:opacity-100 focus:outline-none focus:ring-2 lg:w-64">
    <img class="" src="https://picsum.photos/300/300" alt="" />
  </div>

  <div class="shadow-gentle-backdrop w-54 sm:w-66 lg:w-133 relative mb-8 flex-shrink-0 rotate-2 transform overflow-hidden rounded-lg transition hover:rotate-0 focus:outline-none focus:ring-2 md:w-96">
    <img src="https://picsum.photos/500/400" alt="" />
  </div>
</div>

<div class="lg:-ml-100 xl:-ml-50 lg:space-x-15 -ml-20 flex items-end justify-center space-x-4 sm:space-x-8 md:space-x-12">
  <div class="shadow-gentle-backdrop w-35 md:w-68 lg:w-84 relative -mt-4 flex-shrink-0 -rotate-3 transform self-start overflow-hidden rounded-lg opacity-80 transition hover:rotate-0 hover:opacity-100 focus:outline-none focus:ring-2 sm:w-52">
    <img class="" src="https://picsum.photos/200/200" alt="" />
  </div>

  <div class="shadow-gentle-backdrop w-37 md:w-76 lg:w-92 rotate-4 relative flex-shrink-0 transform overflow-hidden rounded-lg opacity-80 transition hover:rotate-0 hover:opacity-100 focus:outline-none focus:ring-2 sm:w-56">
    <img class="" src="https://picsum.photos/200/300" alt="" />
  </div>

  <div class="shadow-gentle-backdrop w-42 md:w-82 relative flex-shrink-0 -rotate-2 transform overflow-hidden rounded-lg opacity-80 transition hover:rotate-0 hover:opacity-100 focus:outline-none focus:ring-2 sm:w-60 lg:w-96">
    <img class="" src="https://picsum.photos/500/300" alt="" />
  </div>

  <div class="shadow-gentle-backdrop w-35 sm:w-58 md:w-76 lg:w-85 relative -mt-8 flex-shrink-0 rotate-2 transform self-start overflow-hidden rounded-lg opacity-80 transition hover:rotate-0 hover:opacity-100 focus:outline-none focus:ring-2">
    <img class="" src="https://picsum.photos/600/300" alt="" />
  </div>
</div>

but i don't have the desired results in the same ratio.

i would love to recreate the above thing. even though i did copy the code from the tella website itself with a little change, the desired results depend on the image size.

personally, i want them to look like the screenshot above & every image is of the same size of 1439*793

the ui should look the same even if you make the screen size responsive.

how do i make that happen?

tailwind play → https://play.tailwindcss.com/5OXcK7F8qb?layout=horizontal

Upvotes: 1

Views: 692

Answers (1)

cascading-jox
cascading-jox

Reputation: 1131

The issue with your code is that you didn't add the container div for the rows.

I did that and recreated the grid with pretty much the same code as the tella website. I made it a bit asymmetrical but you can easily make it symmetrical by copying the first section and pasting over the second.

If you want it to be as responsive as the other website you will have to design new breakpoints and behavior for those. I didn't do that because I have no idea how many images you would like to have on each row or what height the images should be. It is at least a bit responsive now :).

I hope this can be a good start for you: https://play.tailwindcss.com/hEJgrTUbPb?layout=horizontal&size=1836x720

Upvotes: 1

Related Questions