JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="col-12 col-sm-6 col-md-4 col-lg-4 mt-4">
            <div class="card">
                <img class="card-img-top" src="/2020-02-24 15.18.25_1593079252.jpg" alt="Card image cap">
                <div class="card-body">
                    <a href="#"><h5 class="card-title">hrmndiiii</h5></a>
                    <p class="card-text">Lorem Ipsum is simply dummy text of the printe Lorem Ipsum is simply dummy text of the printe Lorem Ipsum is simply dummy text of the printe Lorem Ipsum is simply dummy text of the printe Lorem Ipsum is simply dummy text of the printe Lorem Ipsum is simply dummy text o</p>
                </div>
                <div class="card-footer">
                    <small class="text-muted">Jun 25, 2020</small>
                    <small class="text-primary">
                                                #test 
                                        </small>
                </div>
            </div>
        </div>

CSS

.card-body .card-text{
    height: 76px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}