Untitled
unknown
html
a year ago
1.3 kB
14
Indexable
<!DOCTYPE html> <html lang="en"> <head> <title>Grid</title> <style> div { font-family: Arial; } .tabs { width: 250px; border-style: solid; border-width: 1px; border-color: gray; border-radius: 5px; height: 500px; display: flex; flex-direction: column; justify-content: space-between; } .tab { display: flex; justify-content: space-between; align-items: center; margin-left: 10px; margin-right: 10px; padding-top: 5px; padding-bottom: 5px; } .tab-name { font-size: 18px; } .tab-count { color: white; background-color: rgb(0, 123, 255); padding-left: 10px; padding-right: 10px; padding-top: 2px; padding-bottom: 2px; border-radius: 10px; } </style> </head> <body> <div class="tabs"> <div class="tab"> <div class="tab-name">Home</div> <div class="tab-count">14</div> </div> <div class="tab"> <div class="tab-name">Notifications</div> <div class="tab-count">3</div> </div> <div class="tab"> <div class="tab-name">Messages</div> <div class="tab-count">5</div> </div> <div class="tab"> <div class="tab-name">Bongas</div> <div class="tab-count">501</div> </div> </div> </body> </html>
Editor is loading...
Leave a Comment