JSFiddle - React, Tailwind, and code Playground

by adelura

HTML

<button>
hello
</button> <br><br>

<div class="foo">
  <div class="wrapper">
    <div class="wrapper__inner ">Head</div>
    <div class="wrapper__inner" tabindex="0">Prev</div>
    <div class="wrapper__inner">
      <div class="wrapper wrapper_-nested">
        <div class="wrapper__inner" tabindex="0">1</div>
        <div class="wrapper__inner">2</div>
        <div class="wrapper__inner" >3</div>
      </div>

    </div>
    <div class="wrapper__inner" tabindex="0">Next</div>
  </div>
</div>

SCSS

$screen-xs-max: 767.9px;
$screen-sm-min: 768px;

$focusable-box-border-width: 1px;
$focusable-box-thick-border-width: 4px;
$focusable-box-border-radius: 6px;
$focusable-box-background-colour: #fff;
$focusable-box-border-colour: grey;
$focusable-box-outline-inner-colour: lightgreen;
$focusable-box-outline-inner-width: 1px;
$focusable-box-outline-outer-colour: rgba($focusable-box-outline-inner-colour, 0.4);
$focusable-box-outline-outer-width: 4px;
$focusable-box-outline-edge-radius: $focusable-box-border-radius + $focusable-box-outline-outer-width;

hr {
  border: none;
  border-bottom: 3px solid orange;
}

@mixin focusable-box-only-lines-between {
  border-top: none;
  border-left: none;
  border-right: none;
  margin-top: 0;

  &:last-child {
    border-bottom: none;
  }
}

@mixin focusable-box-rounded-borders($element-radius, $outline-radius) {
  &:first-child {
    border-top-left-radius: $element-radius;
    border-top-right-radius: $element-radius;

    &:focus::before {
      border-top-left-radius: $outline-radius;
      border-top-right-radius: $outline-radius;
    }
  }

  &:last-child {
    border-bottom-left-radius: $element-radius;
    border-bottom-right-radius: $element-radius;

    &:focus::before {
      border-bottom-left-radius: $outline-radius;
      border-bottom-right-radius: $outline-radius;
    }
  }
}

.wrapper {
  $self: &; // https://css-tricks.com/using-sass-control-scope-bem-naming/

  &__inner {
    
    border: $focusable-box-border-width solid $focusable-box-border-colour;
    background-color: $focusable-box-background-colour;
    margin-top: $focusable-box-border-width * -1;
    position: relative;
    @include focusable-box-rounded-borders($focusable-box-border-radius, $focusable-box-outline-edge-radius);
    
    @media (max-width: $screen-xs-max) {
      @include focusable-box-only-lines-between;
    }

    &:first-child {
      margin-top: 0;
    }

    #{ $self }_-nested & {
      @include focusable-box-rounded-borders(0,...