JSFiddle - React, Tailwind, and code Playground

by borisjavier

HTML

<div class="container">
    <div class="row">
        <!-- Top Video Tutorials <div class="col-xs-12 col-md-8">-->
        
            <div class="panel panel-primary">
                <!-- Default panel contents -->
                <div class="panel-heading">Transacciones</div>

                <div class="table table-bordered table-striped table-hover">
                    <div class="custom-item">
                        <a class="tbl-link" href="#">
                         <strong>Fecha: </strong>Diciembre 25 2021 a las 9:30 PM<br>
                         <strong>A:</strong> Boris Javier Barrera<br><strong>Cuenta: </strong>Boris Ahorros<br>
                       
                        
                            <span class="pull-left"><span class="badge">14HGSX9cmRvBnuJPd77KT1m2V1LqBnKbcz</span>
                                <span class="badge">Valor: GDN 32.5285</span>
                            </span>
                        </a>
                    </div>
                    <div class="custom-item">
                        <a class="tbl-link" href="#">
                         <strong>Fecha: </strong>Diciembre 25 2021 a las 9:30 PM<br>
                         <strong>A:</strong> Boris Javier Barrera<br><strong>Cuenta: </strong>Boris Ahorros<br>
                       
                        
                            <span class="pull-left"><span class="badge">14HGSX9cmRvBnuJPd77KT1m2V1LqBnKbcz</span>
                                <span class="badge">Valor: GDN 32.5285</span>
                            </span>
                        </a>
                    </div>
                    <div class="custom-item">
                        <a class="tbl-link" href="#">Adele ft Elvis prestly ft long text
                            <span class="pull-right"><span class="badge">24 Songs</span>
                                <span class="badge">3500 Views</span>
                            </span>
                        </a>
                   ...

CSS

/* CSS used here will be applied after bootstrap.css */
.custom-item {
    display: inline-block;
    width: 100%;
    height: 100%;
}
/*.custom-item:nth-child(even) {
    background: black;
}*/
.tbl-link {
    display: inline-block;
    width:100%;
    border-top: 1px solid lightgray;
    padding: 5px;
    text-decoration: none;
}

.tbl-link:hover {
    color: black;
    background: lightgray;
    text-decoration: none;
}