JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tronic247/material/dist/css/material.min.css">
</head>
<body class="p-5">
<center>
<div class="ripple-e center-ripple dark" style="width: max-content;">
<img src="logo.png" alt="Tronic247 Material" height="200">
</div>
</center>
<button class="outlined elevation-1 dark" onclick="jQuery('#drawer').toggleClass('open');">Toggle</button>
<div class="drawer-overlay" id="drawer">
<div class="drawer modal">
<h3>Mail</h3>
<p>By Tronic247</p>
<nav class="list small">
<a href="#!" class="list-item active"><i class="material-icons">inbox</i>Item</a>
<a href="#!" class="list-item"><i class="material-icons">star</i>Item</a>
<a href="#!" class="list-item"><i class="material-icons">send</i>Item</a>
<a href="#!" class="list-item"><i class="material-icons">drafts</i>Item</a>
<hr>
<a href="#!" class="list-item"><i class="material-icons">label</i>Label 1</a>
<a href="#!" class="list-item"><i class="material-icons">label</i>Label 2</a>
<a href="#!" class="list-item"><i class="material-icons">label</i>Label 3</a>
<a href="#!" class="list-item"><i class="material-icons">label</i>Label 4</a>
<a href="#!" class="list-item"><i class="material-icons">label</i>Label 5</a>
<hr>
<a href="#!" class="list-item"><i class="material-icons">feedback</i>Feedback</a>
<a href="#!" class="list-item"><i class="material-icons">settings</i>Options</a>
</nav>
</div>
</div>
<br>
<div class="appbar">
<div class="appbar-left">
<button class="icon center-ripple"><i...