JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper"><p></p></div>
CSS
/* Custom code */
.wrapper {
margin: 90px;
}
/* Generated code */
.wrapper {
width: 300px;
height: 300px;
-moz-border-radius: 10px; /* from vector shape */
-webkit-border-radius: 10px; /* from vector shape */
border-radius: 10px; /* from vector shape */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; /* prevents bg color from leaking outside the border */
background-color: #fff; /* layer fill content */
-moz-box-shadow:
inset 0 2px 3px rgba(255,255,255,.5) /* inner shadow */,
0 0 10px rgba(204,204,204,.5) /* outer glow */,
0 0 0 1px #d8d8d8 /* outer stroke */;
-webkit-box-shadow:
inset 0 2px 3px rgba(255,255,255,.5) /* inner shadow */,
0 0 10px rgba(204,204,204,.5) /* outer glow */,
0 0 0 1px #d8d8d8 /* outer stroke */;
box-shadow:
inset 0 2px 3px rgba(255,255,255,.5) /* inner shadow */,
0 0 10px rgba(204,204,204,.5) /* outer glow */,
0 0 0 1px #d8d8d8 /* outer stroke */;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMmYyZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient fill */
background-image: -moz-linear-gradient(90deg, #e5e5e5 0%, #f2f2f2 100%); /* gradient fill */
background-image: -o-linear-gradient(90deg, #e5e5e5 0%, #f2f2f2 100%); /* gradient fill */
background-image: -webkit-linear-gradient(90deg, #e5e5e5 0%, #f2f2f2 100%); /*...