JSFiddle - React, Tailwind, and code Playground

by thallysondias

HTML

<!DOCTYPE html>
<html>
  <body>
    <div class="wrapper">
        <div class="subscriptions">            
            <div class="subscription-items">
              <div class="subscription-item">                  
                  <a class="subscription-item-btn product-type-full" type="button">
                    <span class="subscription-item-price" id="monthly-price">12 345,67 EUR</span>
                    <span class="subscription-item-length"> / month </span>
                  </a>
                </div>
                <div class="subscription-item subscription-item-yearly">
                    <a class="subscription-item-btn product-type-full" type="button">
                        <span class="subscription-item-price" id="yearly-price">12 345,67 EUR</span>
                        <span class="subscription-item-length"> / year </span>
                    </a>                    
                </div>
                <div class="subscription-item">
                    <a class="subscription-item-btn subscription-item-restore-btn" type="button">
                        Restore
                    </a>
                </div>                
            </div>
        </div>        
    </div>
  </body>
  </html>

CSS

body{
    background: #EFEFF4;
}

.wrapper {
    padding: 20px;
}

.subscription-items {    
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-gap: 8%;
}

.subscription-item {
    position: relative;
    display: inline-block;
    background: white;
    text-align: center;
    padding: 20px;
}

.subscription-item-btn {
    display: inline-block;
    background: blue;
    border-radius: 5px;
    text-align: center;
    color: white;
    padding: 13px;
   
    min-width: calc(100% - 20px);
}

.subscription-item-price {
    font-size: 20px;
    font-weight: bold;
}