google meet clone

Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

This tailwind example is contributed by Abhiraj, on 26-Jan-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are blog page template, article page template

Card Blog post page Other

Author Abhiraj

Tailwind v3.4 1.9k 4

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" class="h-full">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Meeting App</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        darkMode: "media",
        theme: {
          extend: {
            colors: {
              primary: "#06b6d4",
              secondary: "#0891b2",
            },
          },
        },
      };
    </script>
  </head>
  <body class="h-full bg-black text-gray-100">
    <div class="flex h-full">
      
      <aside
        class="w-20 bg-gray-900 flex flex-col items-center py-6 border-r border-gray-800"
      >
        <div
          class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center mb-8"
        >
          <svg
            class="w-8 h-8 text-white"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
            />
          </svg>
        </div>

<main class="flex-1 flex flex-col">
        <header
          class="p-4 border-b border-gray-800 flex items-center justify-between"
        >
          <div class="flex items-center gap-4">
            <h1 class="text-xl font-bold">
              Design retrospective November 2023
            </h1>
            <span class="text-sm text-gray-400">4 participants</span>
          </div>
          <div class="flex items-center gap-4">
            <button class="p-2 hover:bg-gray-800 rounded-lg">
              <svg
                class="w-6 h-6 text-primary"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M15 19l-7-7 7-7"
                />
              </svg>
            </button>
            <button class="p-2 hover:bg-gray-800 rounded-lg">
              <svg
                class="w-6 h-6 text-primary"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
                />
              </svg>
            </button>
          </div>
        </header>

<div
          class="flex-1 p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
        >
          <div
            class="relative aspect-video bg-gray-800 rounded-xl overflow-hidden"
          >
            <img
              src="
 https://res.cloudinary.com/djv4xa6wu/image/upload/v1735722161/AbhirajK/Abhirajk2.webp
              
              "
              alt="Video participant"
              class="w-full h-full object-cover"
            />
            <div class="absolute bottom-4 left-4 flex items-center gap-2">
              <span class="font-medium">Abhiraj</span>
              <svg
                class="w-4 h-4 text-primary"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"
                />
              </svg>
            </div>
          </div>

<div
            class="relative aspect-video bg-gray-800 rounded-xl overflow-hidden"
          >
            <img
              src="https://res.cloudinary.com/djv4xa6wu/image/upload/v1737831467/abhiraj_tdwxdf.webp"
              alt="Video participant"
              class="w-full h-full object-cover"
            />
            <div class="absolute bottom-4 left-4 flex items-center gap-2">
              <span class="font-medium">Abhi 2</span>
              <svg
                class="w-4 h-4 text-primary"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"
                />
              </svg>
            </div>
          </div>

<footer class="p-4 border-t border-gray-800">
          <div class="max-w-3xl mx-auto flex items-center justify-center gap-4">
            <button
              class="p-4 bg-gray-800 rounded-xl hover:bg-gray-700 text-primary"
            >
              <svg
                class="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"
                />
              </svg>
            </button>
            <button
              class="p-4 bg-gray-800 rounded-xl hover:bg-gray-700 text-primary"
            >
              <svg
                class="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
                />
              </svg>
            </button>
            <button
              class="p-4 bg-gray-800 rounded-xl hover:bg-gray-700 text-primary"
            >
              <svg
                class="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
                />
              </svg>
            </button>
            <button
              class="p-4 bg-gray-800 rounded-xl hover:bg-gray-700 text-primary"
            >
              <svg
                class="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                />
              </svg>
            </button>
            <button class="p-4 bg-red-600 rounded-xl hover:bg-red-700">
              <svg
                class="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </div>
        </footer>
      </main>

<aside class="w-80 bg-gray-900 border-l border-gray-800 hidden lg:block">
        <div class="p-4 border-b border-gray-800">
          <h2 class="text-lg font-bold">Chat</h2>
        </div>
        <div class="p-4 space-y-4 h-[calc(100vh-10rem)] overflow-y-auto">
          <div class="flex gap-3">
            <img
 https://res.cloudinary.com/djv4xa6wu/image/upload/v1735722161/AbhirajK/Abhirajk3.webp
              src="
"
              alt="User"
              class="w-8 h-8 rounded-full"
            />
            <div>
              <div class="flex items-center gap-2">
                <span class="font-medium">Abhi v1</span>
                <span class="text-xs text-gray-400">10:30</span>
              </div>
              <p class="text-gray-300">We are working on the kare</p>
            </div>
          </div>
        </div>
        <div class="p-4 border-t border-gray-800">
          <div class="flex items-center gap-2 bg-gray-800 rounded-xl p-2">
            <input
              type="text"
              placeholder="Type a message..."
              class="flex-1 bg-transparent focus:outline-none"
            />
            <button class="p-2 text-primary hover:bg-gray-700 rounded-lg">
              <svg
                class="w-5 h-5"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
                />
              </svg>
            </button>
          </div>
        </div>
      </aside>
    </div>

<div class="fixed bottom-4 right-4 text-sm text-gray-400">
      <a
        href="https://abhirajk.vercel.app"
        target="_blank"
        rel="noopener noreferrer"
        class="hover:text-primary"
      >
        Created by Abhiraj
      </a>
    </div>
  </body>
</html>

Related Examples

simple responsive blog layout with sidebar

Isabella Kowalski

3 years ago

10.4k
cards
cards with background animation

Anonymous

3 years ago

11.9k
cards
cards with background animation

Anonymous

3 years ago

12.6k
cards
cards with background animation

Anonymous

2 years ago

3.8k
Invoice
Invoice

Ameth Galarcio

2 years ago

3.4k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.1k
Payment Cards

Shammi Nethupul

2 years ago

3k
News Feed

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.4k
content section

Crimson

1 year ago

1.6k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Ameth Galarcio

1 year ago

2.3k
Food Order Card
Ecommerce/Food order card layout

Rajesh Maheshwari

1 year ago

1.7k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

rohit whyphy

1 year ago

1.6k