Home
gidy
Innovative Developer & Digital Creator

Innovative Developer & Digital Creator

Innovative Developer

This tailwind example is contributed by gidy, on 28-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Author gidy

877

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DevPort | Next-Gen Portfolio</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/tilt.js@1.2.1/dest/tilt.jquery.min.js"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            'neon': '#00f0ff',
            'cyber': '#ff00aa',
            'matrix': '#00ff88',
            'void': '#0a0a0a',
            'glass': 'rgba(255, 255, 255, 0.1)',
            'dark-glass': 'rgba(0, 0, 0, 0.3)',
          },
          fontFamily: {
            'sans': ['"Inter"', 'sans-serif'],
            'mono': ['"Fira Code"', 'monospace'],
          },
          animation: {
            'float': 'float 6s ease-in-out infinite',
            'pulse-slow': 'pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite',
            'text-gradient': 'textGradient 8s linear infinite',
            'spin-slow': 'spin 20s linear infinite',
          },
          keyframes: {
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-20px)' },
            },
            textGradient: {
              '0%, 100%': { 'background-position': '0% 50%' },
              '50%': { 'background-position': '100% 50%' },
            }
          }
        }
      }
    }
  </script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
  <style>
    body {
      background-color: #0a0a0a;
      color: #e5e7eb;
    }
    .particle {
      position: absolute;
      border-radius: 50%;
      filter: blur(1px);
      opacity: 0.7;
    }
    .glass-card {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .gradient-text {
      background-image: linear-gradient(90deg, #00f0ff, #ff00aa, #00ff88);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .dark .gradient-text-darkmode {
      background-image: linear-gradient(90deg, #00f0ff, #ff00aa, #00ff88);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .tilt-effect {
      transform-style: preserve-3d;
      transform: perspective(1000px);
    }
  </style>
</head>
<body class="min-h-screen overflow-x-hidden font-sans">
  
  <div id="particles-js" class="fixed inset-0 -z-10"></div>

<nav class="fixed w-full z-50 bg-dark-glass glass-card py-4 px-8 backdrop-blur-lg">
    <div class="container mx-auto flex justify-between items-center">
      <div class="text-2xl font-bold gradient-text">DEV<span class="text-white">PORT</span></div>
      <div class="flex items-center space-x-6">
        <a href="#about" class="hover:text-neon transition-colors">About</a>
        <a href="#work" class="hover:text-cyber transition-colors">Work</a>
        <a href="#skills" class="hover:text-matrix transition-colors">Skills</a>
        <button id="theme-toggle" class="p-2 rounded-full bg-glass hover:bg-opacity-50 transition-all">
          <svg id="dark-icon" 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
          </svg>
          <svg id="light-icon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>

<section class="min-h-screen flex items-center pt-20 px-8">
    <div class="container mx-auto">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
        <div class="space-y-8">
          <h1 class="text-5xl md:text-6xl font-bold leading-tight">
            <span class="gradient-text animate-text-gradient">Innovative</span>
            <br>Developer &<br>
            <span class="gradient-text animate-text-gradient">Digital Creator</span>
          </h1>
          <p class="text-lg opacity-80 max-w-lg">
            Crafting immersive digital experiences with cutting-edge tech. 
            Focused on performance, design, and seamless functionality.
          </p>
          <div class="flex space-x-4">
            <button class="px-6 py-3 bg-gradient-to-r from-neon to-cyber rounded-lg font-medium hover:shadow-lg hover:shadow-cyan-500/30 transition-all">
              View Projects
            </button>
            <button class="px-6 py-3 border border-glass rounded-lg hover:bg-glass transition-all">
              Contact Me
            </button>
          </div>
        </div>
        <div class="relative">
          <div class="tilt-effect" data-tilt data-tilt-max="10" data-tilt-speed="400" data-tilt-perspective="1000">
            <div class="glass-card rounded-2xl p-1">
              <img src="https://images.unsplash.com/photo-1633356122544-f134324a6cee?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                   alt="Developer Coding" 
                   class="rounded-xl w-full h-auto">
            </div>
          </div>
          <div class="absolute -bottom-6 -left-6 w-24 h-24 bg-neon rounded-full opacity-20 animate-pulse-slow -z-10"></div>
          <div class="absolute -top-6 -right-6 w-32 h-32 bg-cyber rounded-full opacity-20 animate-pulse-slow -z-10" style="animation-delay: 2s;"></div>
        </div>
      </div>
    </div>
  </section>

<section id="work" class="py-20 px-8">
    <div class="container mx-auto">
      <h2 class="text-4xl font-bold mb-12 gradient-text">Featured <span class="text-white">Work</span></h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        
        <div class="tilt-effect" data-tilt data-tilt-max="5" data-tilt-glare="true">
          <div class="glass-card rounded-xl overflow-hidden hover:shadow-lg hover:shadow-neon/20 transition-all h-full">
            <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                 alt="Project 1" 
                 class="w-full h-48 object-cover">
            <div class="p-6">
              <h3 class="text-xl font-bold mb-2">AI Dashboard</h3>
              <p class="opacity-80 mb-4">Next.js + Tailwind + TensorFlow</p>
              <div class="flex flex-wrap gap-2 mb-4">
                <span class="px-3 py-1 bg-glass rounded-full text-sm">React</span>
                <span class="px-3 py-1 bg-glass rounded-full text-sm">AI</span>
                <span class="px-3 py-1 bg-glass rounded-full text-sm">Node.js</span>
              </div>
              <a href="#" class="text-neon hover:underline">View Project →</a>
            </div>
          </div>
        </div>
        
        
        <div class="tilt-effect" data-tilt data-tilt-max="5" data-tilt-glare="true">
          <div class="glass-card rounded-xl overflow-hidden hover:shadow-lg hover:shadow-cyber/20 transition-all h-full">
            <img src="https://images.unsplash.com/photo-1555774698-0b77e0d5fac6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                 alt="Project 2" 
                 class="w-full h-48 object-cover">
            <div class="p-6">
              <h3 class="text-xl font-bold mb-2">E-Commerce Platform</h3>
              <p class="opacity-80 mb-4">React + GraphQL + Stripe</p>
              <div class="flex flex-wrap gap-2 mb-4">
                <span class="px-3 py-1 bg-glass rounded-full text-sm">React</span>
                <span class="px-3 py-1 bg-glass rounded-full text-sm">GraphQL</span>
                <span class="px-3 py-1 bg-glass rounded-full text-sm">MongoDB</span>
              </div>
              <a href="#" class="text-cyber hover:underline">View Project →</a>
            </div>
          </div>
        </div>
        
        
        <div class="tilt-effect" data-tilt data-tilt-max="5" data-tilt-glare="true">
          <div class="glass-card rounded-xl overflow-hidden hover:shadow-lg hover:shadow-matrix/20 transition-all h-full">
            <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                 alt="Project 3" 
                 class="w-full h-48 object-cover">
            <div class="p-6">
              <h3 class="text-xl font-bold mb-2">Blockchain Explorer</h3>
              <p class="opacity-80 mb-4">Solidity + Web3.js + Ethers</p>
              <div class="flex flex-wrap gap-2 mb-4">
                <span class="px-3 py-1 bg-glass rounded-full text-sm">Blockchain</span>
                <span class="px-3 py-1 bg-glass rounded-full text-sm">Web3</span>
                <span class="px-3 py-1 bg-glass rounded-full text-sm">React</span>
              </div>
              <a href="#" class="text-matrix hover:underline">View Project →</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

<section id="skills" class="py-20 px-8 bg-gradient-to-br from-void to-gray-900">
    <div class="container mx-auto">
      <h2 class="text-4xl font-bold mb-12 gradient-text">Tech <span class="text-white">Stack</span></h2>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
        
        <div class="glass-card rounded-xl p-6 text-center hover:transform hover:scale-105 transition-all">
          <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-glass rounded-full">
            <img src="https://plus.unsplash.com/premium_photo-1661877737564-3dfd7282efcb?q=80&w=1500&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="React" class="w-10 h-10">
          </div>
          <h3 class="font-bold">React</h3>
          <p class="text-sm opacity-70">Frontend</p>
        </div>
        
        
        <div class="glass-card rounded-xl p-6 text-center hover:transform hover:scale-105 transition-all">
          <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-glass rounded-full">
            <img src="https://plus.unsplash.com/premium_photo-1661877737564-3dfd7282efcb?q=80&w=1500&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Node.js" class="w-10 h-10">
          </div>
          <h3 class="font-bold">Node.js</h3>
          <p class="text-sm opacity-70">Backend</p>
        </div>
        
        
        <div class="glass-card rounded-xl p-6 text-center hover:transform hover:scale-105 transition-all">
          <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-glass rounded-full">
            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-plain.svg" alt="Tailwind" class="w-10 h-10">
          </div>
          <h3 class="font-bold">Tailwind</h3>
          <p class="text-sm opacity-70">CSS</p>
        </div>
        
        
        <div class="glass-card rounded-xl p-6 text-center hover:transform hover:scale-105 transition-all">
          <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-glass rounded-full">
            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="TypeScript" class="w-10 h-10">
          </div>
          <h3 class="font-bold">TypeScript</h3>
          <p class="text-sm opacity-70">Language</p>
        </div>
        
        
        <div class="glass-card rounded-xl p-6 text-center hover:transform hover:scale-105 transition-all">
          <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-glass rounded-full">
            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" alt="Python" class="w-10 h-10">
          </div>
          <h3 class="font-bold">Python</h3>
          <p class="text-sm opacity-70">AI/ML</p>
        </div>
      </div>
    </div>
  </section>

<footer class="py-12 px-8 bg-dark-glass">
    <div class="container mx-auto text-center">
      <div class="flex justify-center space-x-6 mb-6">
        <a href="#" class="text-gray-400 hover:text-neon transition-colors">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
          </svg>
        </a>
        <a href="#" class="text-gray-400 hover:text-cyber transition-colors">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
          </svg>
        </a>
        <a href="#" class="text-gray-400 hover:text-matrix transition-colors">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
          </svg>
        </a>
      </div>
      <p class="text-gray-500 text-sm">© 2023 DevPort. All rights reserved.</p>
    </div>
  </footer>

<script>
    // Dark/Light Mode Toggle
    const themeToggle = document.getElementById('theme-toggle');
    const darkIcon = document.getElementById('dark-icon');
    const lightIcon = document.getElementById('light-icon');
    
    themeToggle.addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
      darkIcon.classList.toggle('hidden');
      lightIcon.classList.toggle('hidden');
    });

// Particle Background
    function createParticles() {
      const container = document.getElementById('particles-js');
      const particleCount = 50;
      
      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.classList.add('particle');
        
        // Random properties
        const size = Math.random() * 5 + 1;
        const posX = Math.random() * 100;
        const posY = Math.random() * 100;
        const delay = Math.random() * 10;
        const duration = Math.random() * 20 + 10;
        const color = `hsl(${Math.random() * 60 + 180}, 100%, 70%)`;
        
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        particle.style.left = `${posX}%`;
        particle.style.top = `${posY}%`;
        particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;
        particle.style.backgroundColor = color;
        
        container.appendChild(particle);
      }
    }
    
    // Initialize
    document.addEventListener('DOMContentLoaded', () => {
      createParticles();
      
      // Initialize tilt.js
      if (window.innerWidth > 768) {
        const elements = document.querySelectorAll('.tilt-effect');
        elements.forEach(el => {
          VanillaTilt.init(el, {
            max: 5,
            speed: 400,
            glare: true,
            'max-glare': 0.2,
          });
        });
      }
    });
  </script>
</body>
</html>

Related Examples

Chatbox template

Author:
Lucas Martinez

2 years ago

12.4k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Author:
Samuel Dawson

2 years ago

20.9k
3d card
the Best 3D card with tailwind css

Author:
irahoza daniel

7 months ago

424
Privacy policy page template

Author:
Anonymous

1 year ago

2.7k
cards
cards with background animation

Author:
Anonymous

1 year ago

3k
Popover
basic popover example

Author:
Dipti narayan

2 years ago

12.9k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

8 months ago

637
background animation
background animation

Author:
Anonymous

1 month ago

113
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

Author:
SHARIFUL ISLAM

10 months ago

2.1k
Car booking form
Rental carr booking form to rent a car online

Author:
ehmasuk

1 month ago

241
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

10 months ago

1.2k
Gradient Flip-Text Button with Hover Animation
This stylish button features a dynamic gradient background that shifts from a calm green gradient by default to a vibrant purple-pink-red gradient on hover. The button also includes an interactive text flip effect, where the text seamlessly transitions on hover, creating a visually appealing and modern UI element. Perfect for adding flair to your websites or applications while maintaining functionality and responsiveness.

Author:
SHARIFUL ISLAM

10 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components