HTML/CSS - Portfolio. Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hritik's Portfolio</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://code.iconify.design/2/2.0.4/iconify.min.js"></script>
    <link rel="preconnect" href="https://fonts.bunny.net">
  
  
</head>
<body class="bg-gray-900 text-white">
   <header class="bg-gray-800 text-white text-3xl sm:text-4xl font-bold p-3 sticky top-0">Portfolio.</header>
    <!-- Main Content -->
    <main class="bg-gray-900 text-white py-8">
        <div class="container mx-auto px-4">
 
            <!-- Profile Section -->
  <section class="mt-4 px-4 py-4 bg-gray-800 rounded-lg">
             <div class="flex items-center space-x-4">
 
          <img src="https://static.vecteezy.com/system/resources/previews/022/484/651/non_2x/happy-3d-student-boy-with-books-on-white-background-transparent-background-free-png.png?hl=en-US"

css

@import url(https://fonts.bunny.net/css?family=alata:400|ewert:400);
*{
    font-family: 'Alata', sans-serif;
    -webkit-font-smoothing: antialiased;
    scroll-behavior:smooth;
    user-select:none;
}
.skill-badge {
            background-color: #4a5568;
            color: #ffffff;
            padding: 0.25rem 0.5rem;
            border-radius: 0.5rem;
            font-size: 0.75rem;
            display:grid;
            place-item:center;
            font-family: 'Bungee Inline', display;
        }
h1,h2{
    font-family: 'ewert', display;
}

BROWSER

Console