JSFiddle - React, Tailwind, and code Playground

by lubber

HTML

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sidebar Menu | Side Navigation Bar</title>
    <!-- CSS -->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css"
    />
  </head>
  <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
    <div class="ui labeled icon left inline vertical demo sidebar menu">
      <a class="item">
        <i class="home icon"></i>
        Home
      </a>
      <a class="item">
        <i class="block layout icon"></i>
        Topics
      </a>
      <a class="item">
        <i class="smile icon"></i>
        Friends
      </a>
      <a class="item">
        <i class="calendar icon"></i>
        History
      </a>
    </div>
    <div class="ui top attached demo menu">
      <a class="item">
        <i class="sidebar icon"></i>
        Menu
      </a>
    </div>
    <div class="pusher">
      <div class="ui bottom attached segment">
        <div class="ui basic segment">
          <h3 class="ui header">Application Content</h3>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <div class="ui grid">
            <div class="six wide column">
              Menu Text
              <div class="ui vertical menu">
                <div class="item">
                  <div class="ui input">
                    <input type="text" placeholder="Search..." />
                  </div>
                </div>
                <div class="item">
                  Home
                  <div class="menu">
                    <a class="active item">Search</a>
                    <a class="item">Add</a>
                    <a class="item">Remove</a>
                  </div>
                </div>
                <a class="item"> <i class="grid layout icon"></i> Browse </a>
               ...