JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>

<div id="box1">
    <span class="padding">padding in span</span>
    <span class="padding">padding in span</span>
</div>
<hr />
<div id="box2">
    <span class="margin">margin outside of span</span>
    <span class="margin">margin outside of span</span>
</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div>
<lablel class="bg-danger">should be in bg-danger</lablel>
</div>
<div>
<input type="text" name="lname" class="bg-danger" >
</div>

CSS

div{
 border:1px solid #000;   
}
.padding{
    padding:10px;
    border:1px solid red;
}
.margin{
    margin:10px;
    border:1px solid red;
}