Home
Sienna
Sponsors section with icon

Sponsors section with icon

This tailwind example is contributed by Sienna, on 13-Apr-2023. Component is made with Tailwind CSS v3. It is responsive.

Logo cloud

Author Sienna

12.7k

Fork Fullscreen

<h2 class="font-semibold text-3xl">Our Sponsors</h2>

<p class="max-w-md mx-auto mt-2 text-gray-500">
                We are thankful to each and every company sponsored our
                plugin which helped us to continue working on it.
            </p>

</div>

<div class="text-gray-400 ">
                <svg viewBox="0 0 105 22" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em"
                    class="text-[#f03e2f]">
                    <title>Sanity</title>
                    <path opacity="0.7" d="M78.1793 7.99261V21.0028H73.9031V10.2138L78.1793 7.99261Z"
                        fill="currentColor"></path>
                    <path opacity="0.7" d="M20.9511 21.33L30.944 16.1051L29.7121 12.9141L23.1332 15.9821L20.9511 21.33Z"
                        fill="currentColor"></path>
                    <path opacity="0.5" d="M73.9031 10.2027L84.7443 4.65477L82.9126 1.5571L73.9031 5.95997V10.2027Z"
                        fill="currentColor"></path>
                    <path opacity="0.7" d="M43.3705 6.96233V21.0028H39.2927V1.00714L43.3705 6.96233Z"
                        fill="currentColor"></path>
                    <path opacity="0.5"
                        d="M27.1299 6.18617L20.9511 21.33L17.7731 18.5943L25.1353 1.00714L27.1299 6.18617Z"
                        fill="currentColor"></path>
                    <path d="M25.1353 1.00714H29.3477L37.1386 21.0028H32.8269L25.1353 1.00714Z" fill="currentColor">
                    </path>
                    <path d="M44.0012 1.00714L52.9824 14.6682V21.0028L39.2927 1.00714H44.0012Z" fill="currentColor">
                    </path>
                    <path d="M64.9183 1.00714H60.6739V21.0063H64.9183V1.00714Z" fill="currentColor"></path>
                    <path d="M73.9031 4.65474H67.37V1.00714H82.5867L84.7443 4.65474H78.1793H73.9031Z"
                        fill="currentColor"></path>
                    <path opacity="0.5" d="M97.2754 13.4153V21.0028H93.0629V13.4153" fill="currentColor"></path>
                    <path d="M93.0629 13.4152L100.191 1.00714H104.666L97.2754 13.4152H93.0629Z" fill="currentColor">
                    </path>
                    <path opacity="0.7" d="M93.063 13.4152L85.7363 1.00714H90.3456L95.3092 9.51008L93.063 13.4152Z"
                        fill="currentColor"></path>
                    <path
                        d="M1.96126 3.31479C1.96126 6.09921 3.71145 7.75595 7.21536 8.62956L10.9283 9.47533C14.2444 10.2236 16.2639 12.0822 16.2639 15.1103C16.2897 16.4295 15.8531 17.7173 15.0274 18.7579C15.0274 15.7368 13.4367 14.1044 9.59972 13.1229L5.95409 12.3085C3.03475 11.6541 0.781478 10.1262 0.781478 6.83709C0.766123 5.56693 1.18116 4.32781 1.96126 3.31479"
                        fill="currentColor"></path>
                    <path opacity="0.7" d="M52.9824 13.6415V1.00714H57.0602V21.0028H52.9824V13.6415Z"
                        fill="currentColor"></path>
                    <path opacity="0.7"
                        d="M12.7458 14.3689C14.3294 15.3643 15.0238 16.7565 15.0238 18.7544C13.713 20.4041 11.4101 21.33 8.70333 21.33C4.14718 21.33 0.958577 19.1268 0.25 15.2982H4.62547C5.18878 17.0559 6.68034 17.8703 8.67144 17.8703C11.1019 17.8703 12.7174 16.5964 12.7493 14.3619"
                        fill="currentColor"></path>
                    <path opacity="0.7"
                        d="M4.23567 7.44267C3.5125 7.02045 2.9192 6.41375 2.51873 5.68697C2.11827 4.96019 1.92558 4.14045 1.96113 3.31476C3.22594 1.67891 5.42608 0.679993 8.10804 0.679993C12.7492 0.679993 15.4347 3.08852 16.0972 6.47856H11.8883C11.4242 5.14203 10.2621 4.10136 8.14347 4.10136C5.87957 4.10136 4.33487 5.39611 4.24629 7.44267"
                        fill="currentColor"></path>
                </svg>
            </div>

</div>

Related Examples

Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

2 years ago

13.3k
background animation
background animation

Author:
Anonymous

2 years ago

48.6k
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

41.3k
Logo cloud

Author:
Alok

2 years ago

10.2k
Company Logos Showcase
Client showcase with icons

Author:
Brandon D

3 years ago

12.2k
Sponsors section
icon grid

Author:
Sienna

2 years ago

12.5k
Logo cloud of customers
Showcase your customers along with their logos.

Author:
Dika Rahman

1 year ago

2.8k
Company icons grid
responsive company icons showcase grid

Author:
Amit Pachange

2 years ago

11.8k
Chip with logo

Author:
Fagundo67

2 years ago

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

10 months ago

2.3k
Brand icons grid
showcase your 'Happy Customers'.

Author:
Kennedy Mills

2 years ago

10.7k
Home page 2
Отзывчивый логотип по центру. Интерактивные кнопки призыва к действию.

Author:
Алла Телегина

7 months ago

815

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components