Non classic responsive Card component

[Georgeshermann]

Hey ! I'm trying hard (I'm a newbie in webdev) to make this card look like the photo

for small screens (mobile phone etc). I've spent the whole day on this and I still can't find an answer. Can someone help me please ?

PS : I don't care about the sharing and "love" icons, I just want my image and my text to have the same kind of layout.

``

        <img className="w-full" src="http://localhost:1337/uploads/dancing_in_the_streets_of_cuba_23a8503b4d.jpeg" alt="Sunset in the mountains"></img>

        <div className="px-6 py-4">
            <div className="font-bold text-xl mb-2">Title of the events</div>
            <p className="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
        </div>
        <div className="px-6 py-6">
            <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#tag1</span>
            <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#tag2</span>
            <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#tag3</span>
        </div>
    </div>``

[Guardiadelcastro]

Hi,

From what I can see you where most of the way there.
I've redone the example on codepen.

Take note of the way the HTML is structured. I find it easy to imagine everything as boxes and determine what goes inside of which one for layouts. Maybe try drawing them on paper first to always have a reference. With practice this will get easier.

I didn´t like the way the the image is limited in my example maybe try using just plain old CSS for the square, but I tried with tailwind in the example

<div class="flex justify-center items-center bg-gray-100 h-screen">
<div class="px-6 py-4 flex max-w-xl space-x-4 bg-white rounded-md shadow-lg">
  <div class="max-w-xs">
    <div class="w-56 h-full">
      <img class="h-full object-cover" src="https://images.unsplash.com/photo-1533147670608-2a2f9775d3a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3150&q=80" alt="Sunset in the mountains"></img>
    </div>
  </div>
  <div class="flex-grow flex flex-col space-y-2">
    <h3 class="font-bold text-xl text-orange-500">Title of the events</h3>
    <p class="flex-grow text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
    <div class="flex justify-end">
      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#tag1</span>
      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#tag2</span>
      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#tag3</span>
    </div>
  </div>
</div>
</div>

hope this was helpful!

[Georgeshermann]

Hey Thank you for you help.
your code is great. The only issue is that on small screen, it doesn't "shrink" well, the content overlaps the screen.
But it is a great help, I will try to working with this 👍