JSFiddle - React, Tailwind, and code Playground

by Andreu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <div class="container">
    <div class="row">
      <div class="col-1">
        <div class="buttons left"> 1</div>
      </div>
      <div class="col-10 mod">
        10
      </div>
      <div class="col-1">
      <div class="buttons right">2</div>
      </div>
    </div>
  </div>

CSS

.buttons{
  top: 10px;
  height: 80px;
  background-color: red;
  position: relative;
}
.buttons.left{
    box-shadow: 15px 0px 2px -1px #888;
}
.buttons.right{
      box-shadow: -15px 0 4px -1px #888;
}
.mod{
   height: 100px;
  background-color: blue;
}