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.1k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

1 year ago

5.3k
Contact Spinner
Contact button spinning

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

1 year ago

4.8k
Gradient Button
instagram: ferdiisahin

Author:
Anonymous

11 months ago

1.2k
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

4 months ago

1.5k
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

1 month ago

211
Buttons in pair

Author:
Bunny

2 years ago

10.7k
Background Gradient Button with Hover Effects
The button designed with a gradient background that transitions smoothly between three colors

Author:
Kavita Joshi

1 year ago

7.2k
Floating feedback button

Author:
Livia Flores

2 years ago

12k
Dioganal cuts Buttons

Author:
Adulik

1 year ago

6.1k
Get in touch contact form with fabform.io

Author:
Ho O

3 months ago

775
Contact us form template

Author:
Geoffrey Callaghan

1 year ago

6.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components