Home
Geoffrey Callaghan
Tailwind Link Button

Tailwind Link Button

TailwindLink Button

This tailwind example is contributed by Geoffrey Callaghan, on 13-Nov-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Get in touch, Contact form

Button Contact us

Author Geoffrey Callaghan

3.3k

Fork Fullscreen

<a href="https://veilmail.io/irish-geoff" class="inline-flex items-center px-4 py-2 bg-blue-500 border border-transparent rounded-md font-semibold text-white hover:bg-blue-600 focus:outline-none focus:ring focus:border-blue-700 active:bg-blue-800">
    <svg class="w-5 h-5 mr-2 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M4 9.00005L10.2 13.65C11.2667 14.45 12.7333 14.45 13.8 13.65L20 9" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M3 9.17681C3 8.45047 3.39378 7.78123 4.02871 7.42849L11.0287 3.5396C11.6328 3.20402 12.3672 3.20402 12.9713 3.5396L19.9713 7.42849C20.6062 7.78123 21 8.45047 21 9.17681V17C21 18.1046 20.1046 19 19 19H5C3.89543 19 3 18.1046 3 17V9.17681Z" stroke="#000000" stroke-width="2" stroke-linecap="round"></path> </g>
    </svg>
  <span class="inline-block">Reveal Protected Email <br/> https://veilmail.io/irish-geoff</span>
</a>
  <p class="leading-relaxed text-xl text-gray-900 mt-8">
                We use VeilMail.io to <a class="font-medium text-blue-600 dark:text-blue-500 hover:underline" href="https://veilmail.io">hide email address from spammers</a>
            </p>
  </div>

Related Examples

Sign in with GitHub Button

Author:
Conan Hilton

2 years ago

15.4k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

1 year ago

5.6k
Contact Spinner
Contact button spinning

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.8k
Floating buttons examples
Bottom-Right Corner, Bottom-Left Corner, Top-Left Corner, Top-Right Corner, Center, Bottom-Center

Author:
Livia Flores

2 years ago

23.7k
pasta
by salvator

Author:
Baraka Salvator

1 week ago

123
tailwind contact form
Nice looking tailwind contact form

Author:
Geoffrey Callaghan

11 months ago

2.1k
Buttons popup on hover
Popup buttons on hover

Author:
Sophia Baker

2 years ago

13.4k
Call Display UI built with Tailwind CSS
Here's a Call Display UI built with Tailwind CSS that mimics an incoming/ongoing call screen with a modern design:

Author:
irahoza daniel

3 weeks ago

14
Primary secondary button pair

Author:
Iris Callahan

7 months ago

708
shadcn Button
button

Author:
Cristian

10 months ago

1.9k
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Author:
Banshee

6 months ago

1.6k
Elevated Buton
On hover merge shadow

Author:
Anonymous

9 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components