Recreating bootstrap cards row layout with tailwind in django-CodePudding

ASK
I'm trying to recreate bootstrap cards row layout with Tailwind within django framework

BLOCKER
However the tailwind attempt results in below

index.html -- bootstrap

{% extends 'base.html' %}

{% block title %}Home{% endblock title %}

{% block content %}
        <div class="py-2">
            <div class="row">
                {% for t in object_list %}
                <div class="col-md-3">
                    <div class="card mb-4 box-shadow bg-green-500">
                            <div class="card-body">
                                <h2 style="font-size:18px;font-weight:bold;min-height:42px;"><a class="text-dark"  href="#">
                                    {{t.currency|truncatechars:50}}</a></h2>
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted">{{t.country|truncatechars:25}}</small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                {% endfor %}
            </div>


{% endblock content %}

index.html -- tailwind

{% extends 'base.html' %}

{% block title %}Home{% endblock title %}

{% block content %}
    <div class="p-10 ">  
        <div class="max-w-sm rounded overflow-hidden shadow-lg">
            {% for t in object_list %}
          <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">{{t.country}}</div>
            <p class="text-gray-700 text-base">
              {{ t.currency }}
            </p>
          </div>
          {% endfor %}
        </div>
    </div>
{% endblock content %}

CodePudding user response：

You're starting the for loop a tag too late on the Tailwind version so all of your items are in a single card. And to recreate a 4 column grid layout in Tailwind I recommend using the grid utilities, specifically grid which is display: grid and grid-cols-4 which is grid-template-columns: repeat(4, minmax(0, 1fr)).

Your code might look like this:

{% extends 'base.html' %}

{% block title %}Home{% endblock title %}

{% block content %}
    <div class="p-10 grid sm:grid-cols-2 md:grid-cols-4 gap-5"> 
      {% for t in object_list %}
        <div class="bg-green-500 rounded overflow-hidden shadow-lg">
          <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">{{t.country}}</div>
            <p class="text-gray-700 text-base">
              {{ t.currency }}
            </p>
          </div>
        </div>
      {% endfor %}
    </div>
{% endblock content %}

Here's a visual of what the expected output would be https://play.tailwindcss.com/AWK45UcOug