Components : Interactive Gradient Header

Preview content adapted to proportion

Interactive Gradient Header

Banner

This component is used to create a visually appealing and interactive header or section for web pages.

The component features a gradient background, interactive buttons, and hover effects to enhance user engagement.

Users can hover over the buttons to see color changes and shadow effects. The title and text move slightly on hover, adding a dynamic feel. The background and decorative element also respond to hover interactions.


The component is designed to be responsive, with a maximum width of 768px on smaller screens and adjusted padding for different screen sizes. The grid layout and text sizes are also responsive to different devices.

Date : June 16, 2025
Views : 598
Copys : 2

fa-tags

Homepage introductions Product showcases Service highlights

Code

<div class="group relative overflow-hidden bg-gradient-to-r from-[#2563eb80] to-[#10b98170] shadow-xl transition-all duration-300 hover:scale-[1.02] active:scale-95">
 <div class="mx-auto max-w-[768px] px-4 sm:px-6">
  <div class="relative grid gap-4 py-12 md:gap-6 lg:gap-8">
   <div class="space-y-3 transition-transform duration-300 group-hover:translate-x-3">
    <h1 class="text-4xl font-bold tracking-tight text-[#e5e7eb90]">
     Transform Your Experience
    </h1>
    <h2 class="text-xl font-medium text-[#f9731660]">
     Discover seamless integration
    </h2>
   </div>
   <div class="flex gap-4">
    <button class="rounded-lg bg-[#f9731660] px-6 py-3 font-semibold text-[#e5e7eb90] transition-all hover:bg-[#10b98170] hover:shadow-md active:scale-95">
     Get Started
    </button>
    <button class="rounded-lg border-2 border-[#e5e7eb90] bg-transparent px-6 py-3 font-semibold text-[#e5e7eb90] transition-all hover:bg-[#2563eb80] active:scale-95">
     Learn More
    </button>
   </div>
   <div class="absolute -right-20 -top-20 opacity-30 blur-xl transition-transform duration-500 group-hover:translate-x-6 group-hover:translate-y-6">
    <div class="text-[200px]">
     ✨
    </div>
   </div>
  </div>
 </div>
</div>


<template>
 <div class="group relative overflow-hidden bg-gradient-to-r from-[#2563eb80] to-[#10b98170] shadow-xl transition-all duration-300 hover:scale-[1.02] active:scale-95">
  <div class="mx-auto max-w-[768px] px-4 sm:px-6">
   <div class="relative grid gap-4 py-12 md:gap-6 lg:gap-8">
    <div class="space-y-3 transition-transform duration-300 group-hover:translate-x-3">
     <h1 class="text-4xl font-bold tracking-tight text-[#e5e7eb90]">
      Transform Your Experience
     </h1>
     <h2 class="text-xl font-medium text-[#f9731660]">
      Discover seamless integration
     </h2>
    </div>
    <div class="flex gap-4">
     <button class="rounded-lg bg-[#f9731660] px-6 py-3 font-semibold text-[#e5e7eb90] transition-all hover:bg-[#10b98170] hover:shadow-md active:scale-95">
      Get Started
     </button>
     <button class="rounded-lg border-2 border-[#e5e7eb90] bg-transparent px-6 py-3 font-semibold text-[#e5e7eb90] transition-all hover:bg-[#2563eb80] active:scale-95">
      Learn More
     </button>
    </div>
    <div class="absolute -right-20 -top-20 opacity-30 blur-xl transition-transform duration-500 group-hover:translate-x-6 group-hover:translate-y-6">
     <div class="text-[200px]">
      ✨
     </div>
    </div>
   </div>
  </div>
 </div>
</template>
<script>
 export default {
    name: 'MyBannerComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyBannerComponent = () => {
    return (
<div>
<div class="group relative overflow-hidden bg-gradient-to-r from-[#2563eb80] to-[#10b98170] shadow-xl transition-all duration-300 hover:scale-[1.02] active:scale-95">
 <div class="mx-auto max-w-[768px] px-4 sm:px-6">
  <div class="relative grid gap-4 py-12 md:gap-6 lg:gap-8">
   <div class="space-y-3 transition-transform duration-300 group-hover:translate-x-3">
    <h1 class="text-4xl font-bold tracking-tight text-[#e5e7eb90]">
     Transform Your Experience
    </h1>
    <h2 class="text-xl font-medium text-[#f9731660]">
     Discover seamless integration
    </h2>
   </div>
   <div class="flex gap-4">
    <button class="rounded-lg bg-[#f9731660] px-6 py-3 font-semibold text-[#e5e7eb90] transition-all hover:bg-[#10b98170] hover:shadow-md active:scale-95">
     Get Started
    </button>
    <button class="rounded-lg border-2 border-[#e5e7eb90] bg-transparent px-6 py-3 font-semibold text-[#e5e7eb90] transition-all hover:bg-[#2563eb80] active:scale-95">
     Learn More
    </button>
   </div>
   <div class="absolute -right-20 -top-20 opacity-30 blur-xl transition-transform duration-500 group-hover:translate-x-6 group-hover:translate-y-6">
    <div class="text-[200px]">
     ✨
    </div>
   </div>
  </div>
 </div>
</div>

</div>
    )
}
export default MyBannerComponent;

Recommended Related Components

More+

Interactive Digital Experience Section

It is used to showcase features, services, or products in a visually appealing and interactive manner.

1687
9

Next-Gen Innovation

It is designed to showcase a company's innovative solutions, highlight key offerings, and guide users to take action.

1675
0

Interactive Feature Showcase

Ideal for highlighting key offerings, services, or projects on a website or application.

1011
0

Interactive Gradient Header

This component is used to create a visually appealing and interactive header or section for web pages.

598
2