JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vision Pro UI</title>
    <!--Google Fonts and Icons-->
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
      rel="stylesheet"
    />
    <style>
      
    </style>
  </head>
  <body>
    <div class="center">
      <div class="pro-ui">
        <div class="left">
          <div class="head">
            <div class="icons">
              <span class="material-icons-round"> menu </span>
              <span class="material-icons-round button"> arrow_back_ios </span>
              <span class="material-icons-round button">
                arrow_forward_ios
              </span>
            </div>
            <div class="url">
              <span class="material-icons-round">text_fields</span>
              <div class="link">
                <span class="material-icons-outlined"> lock </span>
                https://snippetscode.com
              </div>
              <span class="material-icons-round">refresh</span>
            </div>
            <div class="icons">
              <span class="material-icons-round">ios_share</span>
              <span class="material-icons-round">add</span>
              <span class="material-icons-round">content_copy</span>
            </div>
          </div>

          <div class="video">
            <video src="../images/vision-pro-video.mp4" autoplay loop></video>
          </div>

          <div...

CSS

body {
        width: 100%;
        height: 100vh;
        margin: 0;
        padding: 0;
      }
      .center {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        background: url(https://github.com/SnippetsDevelop/snippetsdevelop.github.io/blob/master/images/vision-pro-back.png?raw=true);
        justify-content: center;
        background-size: cover;
      }
      .pro-ui {
        width: 90%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
      }
      .left {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: start;
        flex-direction: column;
      }
      .head,
      .controls {
        width: fit-content;
        height: fit-content;
        padding: 8px 15px;
        backdrop-filter: blur(18px) saturate(180%);
        -webkit-backdrop-filter: blur(18px) saturate(180%);
        background: rgba(255, 255, 255, 0.3);
        border-radius: 10mm;
        border: 1px solid rgba(209, 213, 219, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
      }
      .icons {
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
      }
      .icons span {
        width: 22px;
        height: 22px;
        text-align: center;
        line-height: 22px;
        border-radius: 50%;
        font-size: 17px;
        margin: 0 10px;
        cursor: pointer;
      }
      .icons .button {
        background: linear-gradient(
          145deg,
          rgb(110, 110, 110),
          rgb(100, 100, 100)
        );
        box-shadow: 2px 2px 4px rgba(150, 150, 150, 0.6),
          -2px -2px 4px rgba(150, 150, 150, 0.6);
        font-size: 14px;
      }
      .url,
      .title {
        width: 250px;
        height: 25px;
        backdrop-filter: blur(11px)...