JSFiddle - React, Tailwind, and code Playground
by wisegorilla
HTML
<!DOCTYPE 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>Document</title>
<link rel="stylesheet" href="account.css" />
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
</head>
<body>
<div class="account-dashboard">
<div class="profile-content-sidebar">
<div class="customer-greeting-block">
<div class="customer-details">
<div class="customer-name">
Hallo, <strong>Islam!</strong>
</div>
<div class="customer-points">
<span>0</span><i class="fas fa-star"></i>Punkte
</div>
</div>
<div class="customer-initials">IM</div>
</div>
<div class="dashboard-menu">
<div class="menu-item active">
<i class="menu-icon fal fa-clipboard-list"></i>
<span class="menu-title">Ăśbersicht</span>
</div>
<!-- Bestellungen -->
<div class="collapsible-parent">
<div class="menu-item">
<i class="menu-icon fal fa-box"></i>
<span class="menu-title">Bestellungen</span>
<i class="far fa-chevron-down font opener"></i>
</div>
<div class="sub-menu-items">
<div class="menu-item">
<spa >Meine Bestellungen</span>
</div>
<div class="menu-item">
<span class="menu-title">Produktbewertungen</span>
</div>
</div>
</div>
<!-- Meine Daten -->
<div class="collapsible-parent">
<div class="menu-item">
<i class="menu-icon fal fa-id-card"></i>
...