Web Component Style Guide - Copy this React, Tailwind Component to your project

Body, html { margin: 0; padding: 0; height: 100%; box sizing: border box; font family: var( default font); } .container { min height: 100%; display: flex; flex direction: column; } .header { height: 50px; border bottom: 1px solid #ac6a6a; display: flex; justify content: space between; align items: center; padding: 0 20px; background color: #f1f1f1; } .header .logo { font size: 32px; font weight: bold; } .header .nav ul { list style: none; display: flex; margin right: 20px; } .header .nav ul li { font size: 20px; border: 1px solid #000000; border radius: 5px; height: 50px; width: 150px; display: flex; align items: center; justify content: center; } .header .nav ul li a { text decoration: none; color: #333; } .menu_list_button { font size: 24px; margin left: 8px; } .overlay { position: fixed; top: 0%; right: 0%; bottom: 0%; left: 0%; background color: rgba(0,0,0,0.3); display: none; } .menu { display: flex; } .menuleft { width: 320px; height: 450px; max width: 100%; background color: #ffffff; padding: 20px; border: 1px solid; transform: translateX( 100%); margin top: 32px; } .exit_menu_list { font size: 24px; margin left: 250px; } .menuleft nav ul { list style: none; padding: 0; margin: 0; } .menuleft nav ul li { margin: 10px 0; } .menuleft nav ul li a, .menuleft nav ul li button { text decoration: none; color: #333; background color: #fffefe; border: 1px solid #ccc; display: block; width: 100%; text align: left; cursor: pointer; } .menu_list_button_check:checked ~ .overlay{ display: block; } .tabbarright { width: 80%; padding: 20px; text align: center; } .tabbarright img { max width: 100%; height: auto; border: 1px solid #ccc; } .footer { margin top: auto; text align: center; padding: 10px; background color: #f1f1f1; border top: 1px solid #ccc; }