JSFiddle - React, Tailwind, and code Playground

by kairavthakar2016

HTML

<div class="container">
    <center>
        <h6>My cards below</h6>
    </center>
    <div id="content">
        <div class="row">
            <div type="button" id="card_0" class="col-xl-3 col-sm-6 mb-xl-0 mb-4" name="card_title_0"
                onclick="highlight(this)">
                <div class="card">
                    <div class="card-header p-3 pt-2">
                        <div
                            class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
                            <i class="material-icons opacity-10">login</i>
                        </div>
                        <div class="text-end pt-1">
                            <p class="text-sm mb-0 text-capitalize">card_title_0</p>
                            <h4 class="mb-0">card_value_0</h4>
                        </div>
                    </div>
                    <hr class="dark horizontal my-0">
                    <div class="card-footer p-3">
                        <p class="mb-0"><span class="text-success text-sm font-weight-bolder">card_percent_0 % </span>
                            actuellement</p>
                    </div>
                </div>
            </div>
            <div type="button" id="card_1" class="col-xl-3 col-sm-6 mb-xl-0 mb-4" name="card_title_1"
                onclick="highlight(this)">
                <div class="card">
                    <div class="card-header p-3 pt-2">
                        <div
                            class="icon icon-lg icon-shape bg-gradient-primary shadow-primary text-center border-radius-xl mt-n4 position-absolute">
                            <i class="material-icons opacity-10">person</i>
                        </div>
                        <div class="text-end pt-1">
                            <p class="text-sm mb-0 text-capitalize">card_title_1</p>
                            <h4 class="mb-0">card_value_1</h4>
                        </div>
      ...

JavaScript

jQuery(document).ready(function ($) {
        $('#card').select();
});

$('card').addClass('border').value('green');
$('card').click(function(){
      $('#card border').html('show');
});