JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<div>
  <input type="text" />
  <select>
    <option>Please choose...</option>
  </select>
</div>

<div class="top-bottom">
  <input type="text" />
  <select>
    <option>Please choose...</option>
  </select>
</div>

CSS

body {
  padding: 20px;
}

body * {
  padding: 5px;
  border-image-source: url('https://images.1thingaweek.com/logos/facebook.png');
  border-image-repeat: round;
  border-image-slice: 20%;
  border-image-width: 5px;
  border-image-outset: 10px;
}

body div.top-bottom,
body div.top-bottom * {
  border-image-width: 5px 0;
}

input {
  margin-right: 20px;
}