JSFiddle - React, Tailwind, and code Playground

by Alphonsio

HTML

<h2>inset</h2>

<div class="box shadow-1">
  <pre>box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.5);</pre>
</div>

<div class="box shadow-2">
  <pre>box-shadow: <b>inset</b> 10px 10px 20px 5px rgba(0, 0, 0, 0.5);</pre>
</div>

<h2>offset-x offset-y</h2>

<div class="box shadow-3">
  <pre>box-shadow: <b>10px 10px</b> 2px rgba(0, 0, 0, 0.5);</pre>
</div>

<div class="box shadow-4">
<pre>box-shadow: <b>-20px -3px</b> 2px rgba(0, 0, 0, 0.5);  </pre>
</div>

<h2>blur-radius</h2>

<div class="box shadow-5">
<pre>box-shadow: 10px 10px <b>0px</b> rgba(0, 0, 0, 0.5);</pre>
</div>

<div class="box shadow-6">
<pre>box-shadow: 10px 10px <b>5px</b> rgba(0, 0, 0, 0.5);  </pre>
</div>

<div class="box shadow-7">
<pre>box-shadow: 10px 10px <b>20px</b> rgba(0, 0, 0, 0.5); </pre>
</div>

<h2>spread-radius</h2>

<div class="box shadow-8">
<pre>box-shadow: 10px 10px 10px <b>10px</b> rgba(0, 0, 0, 0.5);</pre>
</div>

<div class="box shadow-9">
<pre>box-shadow: 10px 10px 10px <b>20px</b> rgba(0, 0, 0, 0.5);  </pre>
</div>

<h2>Color</h2>

<div class="box shadow-10">
<pre>box-shadow: 10px 10px 10px <b>rgba(0, 0, 0, 0.5)</b>;</pre>
</div>

<div class="box shadow-11">
<pre>box-shadow: 10px 10px 10px <b>rgba(256, 0, 0, 0.5)</b>;  </pre>
</div>

CSS

body {
 padding: 30px; 
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 50px;
  background-color: #bbb;
  margin-bottom: 30px;
}

.shadow-1 {
  box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.5);
}

.shadow-2 {
  box-shadow: inset 10px 10px 20px 5px rgba(0, 0, 0, 0.5);
}

.shadow-3 {
  box-shadow: 10px 10px 2px rgba(0, 0, 0, 0.5);
}

.shadow-4 {
  box-shadow: -20px -3px 2px rgba(0, 0, 0, 0.5);  
}

.shadow-5 {
  box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.5);
}

.shadow-6 {
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);  
}

.shadow-7 {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);  
}

.shadow-8 {
  box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5);  
}

.shadow-9 {
  box-shadow: 10px 10px 10px 20px rgba(0, 0, 0, 0.5);  
}

.shadow-10 {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);  
}

.shadow-11 {
  box-shadow: 10px 10px 10px rgba(255, 0, 0, 0.5);  
}