JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <div class="e">
                        <label>Themes</label>
                        <ul id="theme-options1" class="nav nav-pills  custom">
                            <li class="active">

                                <a data-toggle="tab" id="theme1" data-id="1">
                                    <i class="fa fa-check them-Selected" aria-hidden="true" ></i>
                                </a>
                            </li>
                            <li>

                                <a data-toggle="tab" id="theme2" data-id="2">
                                    <i class="fa fa-check them-Selected" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li>

                                <a data-toggle="tab" id="theme2" data-id="2">
                                    <i class="fa fa-check them-Selected" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li>

                                <a data-toggle="tab" id="theme2" data-id="2">
                                    <i class="fa fa-check them-Selected" aria-hidden="true"></i>
                                </a>
                            </li>
                        </ul>
                    </div>

CSS

.mat-label,
.theme {
    font-family: inherit;
    margin-left: 2%;
}

#theme-options1 li>a:hover {
    border: 2px solid #76A7E1;
    background-color: transparent !important;
}

#theme-options1>li.active>a {
    border: 2px solid #76A7E1;
    background-color: transparent !important;
}

#theme-options1>li.active>a>i.them-Selected {
    display: block;
}

#theme-options1>li>a {
    border: 1px solid #76A7E1;
    color: white;
    height: 180px;
    width: 255px;
}

#theme-options1 li,
#theme-options1 li>a {
    border-radius: 3;
    margin-left: 2%;
}

.them-Selected {
    position: absolute;
    margin-top: -10%;
    margin-left: 220px;
    background-color: #76A7E1;
    color: white !important;
    padding: 3%;
    border-radius: 50%;
    display: none;
}