JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="store-btn-wrap">
  <a href="/store/checkout" class="ckout-btn">Checkout</a>
  <a href="/store/cart.php" class="viewcrt-btn">View Cart</a>
</div>

<style type="text/css">
a.ckout-btn,
a:visited.ckout-btn{
  background: #4e8511;
  box-sizing: border-box;
  color: #fff;
  padding: .8rem 2rem;
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  margin-bottom: 10px;
  width: 180px;
}

a.viewcrt-btn,
a:visited.viewcrt-btn {
  background: #fff;
  border: 1px solid #0000002b; 
  box-sizing: border-box;
  color: #222;
  padding: .8rem 2rem;
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  width: 180px;
}

.store-btn-wrap {
  display: flex; 
  flex-direction: column;
}

@media screen and (max-width: 512px){
  .store-btn-wrap {
    padding-top: 1rem;
  }
  a.ckout-btn,
  a:visited.ckout-btn,
  a.viewcrt-btn,
  a:visited.viewcrt-btn {
    max-width: 100%;
    width: 100%;
  }
}
</style>