'Make 2 Column Card with different n-rows in each column in Tailwind CSS

How to make 2 column card with different n-rows in each column in tailwind css? Which it I want to make left column with 3 rows and right column with 9 rows in each card.

In my code below I had the row span but when input the row data it have full rows:

<div class="">
<div class="relative px-6 pt-10 pb-8 bg-white shadow-xl ring-1 ring-gray-900/5 sm:max-w-lg sm:mx-auto sm:rounded-lg sm:px-10">
<div class="max-w-md mx-auto grid grid-cols-2"> 
<div class="row-span-3">
  <img src="/img/logo.svg" class="h-6" alt="Tailwind Play" />
  <img src="/img/logo.svg" class="h-6" alt="Tailwind Play" />
  <img src="/img/logo.svg" class="h-6" alt="Tailwind Play" />
  <img src="/img/logo.svg" class="h-6" alt="Tailwind Play" />
</div>
<div class="row-span-6">
  <p>Row 1</p>
  <p>Row 2</p>
  <p>Row 3</p>
  <p>Row 4</p>
  <p>Row 5</p>
  <p>Row 6</p>
  <p>Row 7</p>
  <p>Row 8</p>
  <p>Row 9</p>
</div>
</div>
</div>
</div>

Second questions is, is it ok to use grid inside this card? Because I want to grid this card too into 3 cols and full rows (This card will have grid too at the end with grid-cols-3 grid-rows-full. That is 3 card in column, and full card in rows in the one page).

I am new with tailwind css and had read the docs, but not find the solution. This is my playground https://play.tailwindcss.com/v25K8rwmOC

tailwind-css

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Make 2 Column Card with different n-rows in each column in Tailwind CSS

Sources

Related Questions