JSFiddle - React, Tailwind, and code Playground

by Zer00ne Null

HTML

<form id='dual' name='dual'>
      <label for='sub1'>
        <input id='sub1' type='submit' value=''>Blaajsdkla blaajsdklajsdkla blaajsdklajsdkla blaajsdkla sdlaskjdas Djakldaldasdjaskj Aj as blaajsdkla bBaajsdkla Ssdlaskjdas djakldaldasdjaskj aJ as Blah blah blah blah blah blah blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah</label>
    </form>

CSS

* {
      margin: 0;
      padding: 0;
    }
    #dual {
      display: table;
      table-layout: fixed;
      border-collapse: collapse;
      overflow: hidden;
      max-width: 97vw;
      border: none;
      max-height: 50px;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%)repeat;
    }
    #dual * {
      border: none;
      display: table-row;
      font: inherit;
      outline: none;
      cursor: pointer;
      background: transparent;
      -webkit-appearance: none;
      line-height: 1;
      font-variant: small-caps;
      letter-spacing: .3px;
      word-spacing: 2px;
      white-space: pre-line;
    }
    #sub1 {
      display: none;
    }
    label {
      text-align: justify;
      text-decoration: underline;
      color: #923;
      box-shadow: -8px 8px 10px 3px rgba(0, 0, 0, 0.7);
    }