JSFiddle - React, Tailwind, and code Playground

by meeky333

HTML

<div class="clearAccept-container d-flex justify-content-center">
  <h3 class="clearAccept-container-title">
    <i class="fa fa-chevron-down" aria-hidden="true"></i>
    Pay with a saved card
  </h3>
  <span class="clearAccept-cardCount">1</span>

  <div class="clearAccept-card" data-cardToken="@card.CardToken">
    <div class="container">
      <h4 class="clearAccept-card-title">Card Details</h4>
      <span class="clearAccept-card-scheme">VISA ending in 6069</span>
      <span class="clearAccept-card-expiry">Expires on 12/25</span>
      <span class="clearAccept-card-name-title">Name on the card</span>
      <span class="clearAccept-card-name">Mr Michael A Gill</span>

    </div>
  </div>

  <p class="text-center"><button class="btn btn-default btn-lg clearAccept-inputCard" type="button" id="clearAccept-inputCard">Pay with another card</button></p>
</div>

CSS

.clearAccept-container {
    position: relative;
    width: 400px;
    margin: 0 auto;
    background: #dbdbdb;
    padding: 0 5px;
}

 

    .clearAccept-container .clearAccept-container-title {
        background: #dbdbdb;
        margin: 0;
        padding: 10px 12px;

 

    }

 

.clearAccept-container .clearAccept-cardCount {
        position: absolute;
        top: 10px;
        right: 18px;
        font-size: 18px;
    }


.clearAccept-card {
    position: relative;
    border: 1px solid #aaa;
    height: 100px;
    padding: 7px;
    background: white;
    box-shadow: #b0b0b0 1px 1px 1px 2px;
    margin: 10px 0;
}

 

.clearAccept-inputCard {
    margin-bottom: 10px;
}

 

.clearAccept-card .clearAccept-card-expiry {
    position: absolute;
    right: 15px;
}


.clearAccept-card .clearAccept-card-title {
    margin-top: 5px;
    margin-bottom: 0;
}

.clearAccept-card .clearAccept-card-name-title {
    display: block;
    font-style: italic;
}

.clearAccept-card .clearAccept-card-name {
    display: block;
}

.clearAccept-card .clearAccept-card-delete {
    display: block;
    position: absolute;
    right: 36px;
    font-size: 25px;
    top: 18px;
    border: 1px solid;
    border-radius: 50%;
    padding: 0 8px;
}