JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container-fluid">
   <h3 class="ml-n3">Padding</h3>
  <section class="row">
    <div class="col border border-dark text-dark p-0">
      <div class="bg-info text-white">
         .p-0
      </div>
    </div>
   <div class="col border border-dark text-dark p-1">
      <div class="bg-info text-white">
         .p-1
      </div>
    </div>
    <div class="col border border-dark p-2">
       <div class="bg-info text-white">
         .p-2
       </div>
    </div>
    <div class="col border border-dark p-3">
        <div class="bg-info text-white">
          .p-3    
        </div>
    </div>
    <div class="col border border-dark p-4">
        <div class="bg-info text-white">
          .p-4    
        </div>
    </div>
    <div class="col border border-dark p-5">
        <div class="bg-info text-white">
          .p-5    
        </div>
    </div>
     <div class="col border border-dark pt-4 pl-2">
        <div class="bg-info text-white text-nowrap">
          .pt-4.pl-2    
        </div>
    </div>
    
  </section>
  <h3 class="ml-n3 mt-5">Margin</h3>
  <section class="row">
  <div class="col border border-dark m-0">
          .m-0    
    </div>
  <div class="col border border-dark m-1">
          .m-1    
    </div>
    <div class="col border border-dark m-2">.m-2</div>
    <div class="col border border-dark m-3">.m-3</div>
    <div class="col border border-dark m-4">.m-4</div>
    <div class="col border border-dark m-5">.m-5</div>
    <div class="col border border-dark text-dark">
      <div class="bg-info text-white mt-n1">
         .mt-n1
      </div>
    </div>
    <div class="col border border-dark">
       <div class="bg-info text-white mt-n2">
         .mt-n2
       </div>
    </div>
    <div class="col border border-dark">
        <div class="bg-info text-white mt-n3">
          .mt-n3    
        </div>
    </div>
    <div class="col border...

CSS

body {
  padding: 4rem;
}
.col {
  background-origin: content-box;
}