JSFiddle - React, Tailwind, and code Playground

by Vasil Svetoslavov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<h1>test</h1>
<div class="container">
  <button class="btn btn-info">Test</button>
  <br />
  
  <details class="panel panel-default">
    <summary class="btn btn-success">alabala</summary>
    Ala bala portokala
  </details>

  <form>
    <div class="form-group">
      <label>Some Dropdown</label>
      <select class="bootstrap-select">
        <option>Option 1</option>
        <option>Option 2</option>
        <optgroup label="Opt Group 1">
          <option>OG1 Option 1</option>
          <option>OG1 Option 2</option>
        </optgroup>
        <optgroup label="Opt Group 2">
          <option>OG2 Option 1</option>
          <option>OG2 Option 2</option>
        </optgroup>
      </select>
    </div>
  </form>
</div>

CSS

.bootstrap-select {
  --mox-interpolate-size: allow-keywords;
  appearance: base-select;
  display: block;
  width: 100%;
  height: 34px; /* Standard Bootstrap 3 height */
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: invert;
  background: linear-gradient(180deg, #fff 0%, #ccc 100%);
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);


  &:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow:
      inset 0 1px 1px rgba(0, 0, 0, 0.075),
      0 0 8px rgba(102, 175, 233, 0.6);
  }
  &::picker(select) {
    background: linear-gradient(from top #444 to bottom #ccc);
  }
}
.container {
    transition:all 2s;
    transition-duration: 10s;
    interpolate-size: allow-keywords;
}

/* Focus state mimicry */

/*
  0 0 3px 3px conic-gradient(
    in oklch increasing hue,
    oklch(from red l c 0deg) 0deg,
    oklch(from red l c 180deg) 180deg,
    oklch(from red l c 360deg) 360deg
  );
  */

  details::details-content {
    background: linear-gradient(90deg,red,green,blue,orange)
  }