A boxed layout is like having a boundary on all four sides of a web page and content in the center. Normally boxed layouts have space around that increases the readability of the content. Tailwind  boxed layout is used to add fixed space around the main body of a web page. Normally the space around the edges is used to add a relevant background. Some websites use it just to make the web page look aesthetically pleasing while some brands add colors or pictures that relate to their brand. Tailwind  boxed layout components with its 17 appealing design variations makes it unique. TUK’s boxed layout components provide built-in support for different frameworks including React, Angular, and Vue.     With light and dark layouts and backgrounds of different colors, you can add a different vibe to your webpage. Use the components with background image in the header and page title in your projects to lift your page’s aesthetics.

boxed_layout

Sidebar Layouts provide an alternate master layout for your application. Sidebar layouts contain vertical navigation, header and a container to add more components.

sidebar_layout

master_layout

A Tailwind CSS card component is a container that stores a few short, related bits of information, and physically resembles a playing card in shape and size, allowing for flexible layouts. A tailwind card grid may contain texts, images, links, and buttons amongst other things to conveniently display excessive information in a neat box on a web page with a linked entry point to further details of that content, helping designers retain page aesthetics with good usability. When it comes to visual design, a tailwind card component contains actions and content about a single subject, used to direct a user to detailed content should they desire to. A good card grid would be meaningful, efficient, clear, transformative, independent, and responsive. A tailwind card example can be found with 7 other options on TUK, expertly designed and with built-in support for different frameworks including React, Angular, and Vue, all ready to be dropped into your code.

card

A grid is a set of horizontal and vertical lines that form a pattern helping with arranging the web elements. They help to build structures where objects will not jump around or change the width as we go from page to page, providing greater regularity to websites. Tailwind  grid components can be used to arrange the content and keep it aligned in a clean manner. On top of all that grids are responsive and adapt easily with different screen sizes. The wide range of premade Tailwind  grid components will help you to create layouts with multiple different texts in the same section. Multiple columns and rows make it easier to fit more information in very little space. Match the vibe of your brand with the choice of dark and light themes as well. The readymade HTML code is there for you to just copy it and use. Tailwind  grid components are highly accessible and have built-in support for React, Angular, and Vue.

grid

Grid cards are small card-sized boxes containing important information. Grid cards give an elegant and minimal look to your web page. Tailwind grid card components can be used in flat design, pin-style design, and print. They also help with separating images, text, and headings so that details are presented neatly. They are highly responsive and work perfectly if you happen to change anything as they work well on all screen sizes without putting in too much effort. Tailwind  grid card components provide built-in support for different frameworks including React, Angular, and Vue. You can use them to create dashboards and web app pages. The cards have certain UX that can be modified to fit the needs of various use cases. From displaying an individual profile to neatly showing your activity status these grid cards have many different ways of using them. Wide section cards can help you fit overwhelming information in a small card and you can show the user great customer reviews using these grid cards as well.

grid_card

layout

Tailwind CSS header is the top section of a web page. The header contains links to different important pages, logo, contact information, and call to action buttons. Header Tailwind components are used to add information about the website. It primarily tells users what your website is all about. The header can also be used to make navigation easy and smooth. Tailwind UI Kit’s header components also provide built-in support for different frameworks including React, Angular, and Vue. Users can use TUK’s premade designs and customize them according to their vision. TUK’s Tailwind CSS header component allows users to experiment with a variety of designs. Users can either make their search bar prominent or make their logo stand out in the header. Add the social media handles in the header or a nice profile picture with email using these components.

header

A Tailwind CSS navbar component is a navigation bar situated at the top of a webpage, providing users with a simple and effective way of presenting complex content in an app or website without having to scroll through the content. Navbar Tailwind components act as a roadmap that contains links that take users to different pages or parts of the website/app, and allows users to explore and access the various sites and content that a website contains. Navbar can be placed above, or below a header or a logo, but is always placed before the main content of the page, staying consistent throughout. TUK has various tailwind navbar components which a user can choose from according to the theme of their website, and has built-in support for different frameworks including React, Angular, and Vue.

horizontal_navigation

A Tailwind CSS pagination component enables a user to choose a page they’d like to hop to from a range of pages provided at the top or the bottom of a webpage. It is the process of segmenting pages containing digital content that is alike in nature, allowing users to skip from page to page or from newer to older sections. Pagination tailwind components make the contents of your website easily accessible to users, so they not only enhance user experience, but they also give your website a clean and decluttered look, decreasing your load time by a considerable amount. Pagination also gives users an insight as to how much content and how many pages are left to investigate. An attractive tailwind pagination example is ready to use with 8 different types of free tailwind components on TUK, each one of them carrying pre-built support of various frameworks including React, Angular, and Vue.

pagination

Tabs are a great way to organize content across different screens, data sets, and other interactions. Tailwind  tab category has multiple variations of expertly designed functional and uniquely styled tabs for your web applications and dashboards. The category contains tabs with counters, tabs with icons, tab with blocks, and so on. It gives you the option of not going through different pages as you can swiftly move through the tabs on a single page. Tailwind  tab category contains components that are built with the best contemporary design practices around. The complete category of Tailwind  tab is built on Tailwind  CSS. It also has React, Angular, Vue.js integrations. The components in this category (just like all the other categories) are carefully built following the Web Content Accessibility Guidelines (WCAG). These components are tested for cross-browser functionality so you get to provide a consistent experience across multiple devices, screens, and browsers as well.  Moreover, these tabs are highly customizable, so feel free to tweak things around according to your design requirements.

Navigation bar is at the side or the top of a webpage that helps users to move swiftly through the website without having to scroll through all the content. Tailwind  navigation components allow website visitors to search within a site efficiently. The website navigation system is like a road map that enables web page visitors to explore and discover the various sites and information contained on the website. Three different types of navigation include hierarchical navigation that allows users to search through all website pages from anywhere, global navigation that only shows important sections of a website to the user, and local website navigation helps the user to move around on the same page. Tailwind  navigation components provide built-in support for different frameworks including React, Tailwind  css angular, and Tailwind  css vue. From vertical navigation to sidebar navigation Tailwind  navigation components has diverse options for you to choose from. According to your brand’s identity, you can incorporate the dark or light theme navigation bar in your website as well.

vertical_navigation

navigation

Avatars are used in Web applications and dashboards to present the user’s identity in the digital space. Tailwind  Avatar category has different variations with images, text, and buttons. An avatar can be circular or a rounded rectangle, depending on the requirements of the design, and its relationship with other elements. . You use these avatars inside notification panels, action panels, notifications, and so on. You can also change the colors of the elements inside and around the avatars to build distinctive designs. Tailwind Avatar category contains a beautiful collection of circular, rectangular, stacked, with dropdowns, and rounded avatars. These avatars also come with activity status that you can easily incorporate in other avatars as well. Tailwind  Avatars are completely functional and responsive. All of the components in Tailwind  Avatar category are built using Tailwind  CSS. These components can also be integrated with your React, Angular, and Vue.js projects. We build our components following Web Content Accessibility Guidelines (WCAG). Our team also tests these components for cross-browser compatibility.

avatar

Badges are used when an element needs to be highlighed, or in some cases, differentiated. They are used to direct user’s attention and make them emphasize on certain information. Tailwind  Badges are styled in a way that provides a visual cue based on their purpose. Tailwind  badge category contains multiple variations of badges with different sizes, shapes (rectangular, rounded), styling, and interactive elements (cancel, highlight, etc). You can use the components from the Tailwind  badge category as the primary components (parent components) or integrate them into other components. The variations also include badges that are filled, have a cancel element, and bullet text. Tailwind Badge components are built with Tailwind CSS. They also come with React, Angular, and Vue.js integrations. These components are fully responsive, modular, and functional. These components are also easily customizable so you can experiment according to your project requirements and come up with distinctive components using our Tailwind Components as base components. All of the components in the Tailwind badge category are built following latest WCAG.

badge

Buttons communicate actions that a user can take. They provide relevant actions in context to where the user is. These buttons can also be integrated into grouped buttons , offering a variety of relevant actions grouped together in the interface that the user can interact with. Moreover, you have the option to place graphical elements with text inside the buttons to make your experience more intuitive. Tailwind button category has different variations and sizes of buttons that can be used for multiple functionalities Web Applications, dashboards, and web pages. Tailwind  button category has variations with different sizes, styling, and colors. Our team of expert designers and developers thoroughly test these components for cross-browser compatibility so you can provide consistent experiences across various screen sizes, devices, and browsers. These components are completely modular, functional, and fully responsive so you can in your project without any extra worries. Tailwind  button category is built using the latest update of Tailwind  CSS. These components also have support for React, Angular, and Vue.js integrations. 

button

The Tailwind css radial gauge component provides a number of visual elements, like a needle, tick marks, ranges, and labels, in order to create a predefined shape and scale. It is used to display data visually through various elements like scale, tickmarks, labels, etc….. TUK’s Tailwind gauge components comes in with various different designs. All our components are highly customizable that makes it easy for users to adapt the component according to different project requirements. Most of our components have built-in support for different frameworks including React, Angular, and Vue. TUK's expert team makes the components following the latest Web content Accessibility Guidelines (WCAG). Tailwind UI Kit components are entirely modular, responsive, and drop-in ready and tested for cross-browser compatibility.

gauge

Grouped buttons provide multiple relevant actions throughout the interface that the user can interact with. They are used to reduce the complexity of multiple actions in a single space with the use of harmonious arrangements. Tailwind  grouped button category has 5 different components for several functionalities and uses in Web Applications, dashboards, and web pages alike. You can also use these Tailwind  grouped button components inside other components (like notification panels). Tailwind  grouped button category has variations with different layouts, styling, and color schemes. There are also variations with graphical elements, dropdowns, chevrons, and filters in these grouped buttons. Our team of expert designers and developers thoroughly test these components for cross-browser compatibility so you can provide consistent experiences across various screen sizes, devices, and browsers. These components are completely modular, functional, and fully responsive. Tailwind  grouped button category is built using the latest update of Tailwind  CSS. These components also have support for React, Angular, and Vue.js integrations. We also build these components using the latest WCAG. 

grouped_button

A Tailwind CSS Loader is what users can observe on the screen while the rest of the page’s content is still loading. Tailwind CSS Loader Components  can be both simple or complex animations that are used to keep visitors engaged while server operations finish processing. All the tailwind ui kit components are completely modular, responsive, drop-in ready and tested for cross-browser compatibility. Loader Components are very important interface components that let users know that the website they are interacting with is just processing data and has not crashed or stopped working. All the TUK components have integrations for React and most of them have Vue and Angular integrations as well so that developers can easily integrate the Tailwind CSS Loader components into their projects.

loader

Popovers are temporary views that show on a content screen when a user clicks within a defined area when additional action is needed. A popover is used instead of a toolkit when you want to show additional text or to create a link to another page. It pops up when the user clicks on a word or icon. The popover remains visible until the user clicks outside the popover. This component comes in handy in situations where crucial text or information is needed to be displayed without the space for the text in the design. With theTailwind  Popover category, you can give introductions about different components, have scrolling avatars/lists, place lists & actions, and place text & buttons. Tailwind  popovers by Tailwind  UI kit are completely responsive All of the Tailwind  Popover components are designed with Tailwind CSS and they have support for React, Angular, and Vue.js. like all of TUK’s components, these components are rigorously tested for cross-browser compatibility. All of TUK’s components are built following Web Content Accessibility Guidelines (WCAG).

popover

A Tailwind CSS Progress bar is used to indicate the status of an ongoing task to the user. Progress bars are used in websites, web apps, and web stores. TUK provides several different Tailwind progress bar examples, including thin bar with steps, thin bar with divided steps, broad with subtext, small circle, and much more. The progress bar Tailwind components have built-in support for React, Angular, and Vue. User’s perception of the task difficulty and duration changes because of the display of progress information, thus affecting their second-to-second choices to proceed or leave the errand, making the Tailwind CSS progress bars essential to use. They are ready to drop in any project and can be changed according to your styling preference in your HTML markup. Like each TUK component, these progress bars are also rigorously tested for cross-browser compatibility.

progress_bar

A tailwindcss search bar is a location within a browser that enables you to search the web for anything you want to find. Search bar tailwind components act as a field for a user’s query or search term to search and retrieve related information from the database. Search bars have become pretty common for many websites, web applications, and mobile apps, and can be presented in various styles and forms. Tailwind UI search bars are usually placed at the top of a website/app, either covering one of the two corners or utilizing the broad center space. Tailwind UI Kit has numerous search bar designs for a lot of use cases that exist, and a user can choose from them according to the theme of their website. The search bar component comes with built-in support for different frameworks including React, Angular, and Vue.

search

Tailwind CSS slider components are kind of a slideshow on the website. Slider helps users view the content on a web page and as a result, it makes the web page look neat and saves space on the page. The slider Tailwind components category has 5 different and elegant-looking sliders that users can use under various different capacities. Whether the user needs a simple way to display a slideshow of photos on an eCommerce or real estate website or wants a bold video header with calls-to-action, sliders can help users quickly grab the visitors’ attention. The Tailwind css slider category has built-in support for different frameworks including React, Angular, and Vue. TUK's expert team makes the components following the latest Web content Accessibility Guidelines (WCAG). Tailwind UI Kit components are entirely modular, responsive, and drop-in ready and tested for cross-browser compatibility.

slider

A tooltip is a brief, informative message that appears when a user interacts (hover, focus, or click) with an element. It provides additional information for clarification or an additional action for the user. The function of a tooltip is simple, it appears when the user interacts with the icon and goes away when the user interacts with the tooltip or hovers away from the icon. TUK has multiple variations of Tailwind  CSS tooltip that allow you to achieve various user objectives in your web apps. With the extensive collection of tooltips below, you can exchange user experience by showing vital additional information that can’t seem to fit into your design. Usually, tooltips are integral parts of web apps as certain user journeys require crucial information for the user. These Tailwind  CSS tooltips also have React, Angular, and Vue integrations. Additionally, Tailwind  UI Kit components are built following Web Content Accessibility Guidelines (WCAG). All of the components in this category are fully responsive, functional, and rigorously tested for cross-browser compatibility.

tooltip

UI_element

A Tailwind  CSS calendar can be used to keep track of your events, monitor your pending tasks, or just simply identify the dates as well as the days of the month . TUK provides stylish ready-made calendar components that are compatible with React, Angular, and Vue. From marking trips that last weeks to marking several commitments in a single day TUK’s Tailwind  css calendar got you covered in all cases. TUK has two variations of neatly designed calendars along with a date picker component. Tailwind calendar helps to mark important appointments, trips and meetings, and also events happening on the same day with its variation of calendars. You can also add reminders to different events happening at the same time. Easily set memos for your meetings, lunch break, appointments, and interviews happening at different times on the same day. Simply copy the HTML code provided and integrate it into your personal or commercial projects.

calendar

A Tailwind CSS alert component is a dialogue box, also commonly known as a toast message, displaying a short, important message in a manner that attracts a user’s attention. Alerts are used when there’s a need for a static persistent container that is closable by users, or when an alert message is to be shown to users. Alert tailwind components are lightweight and translucent, take minimal space, and are used to show a success text, info text, warning text, or error text.  Most alert components carry a small icon to complement the message they’re carrying, grabbing a user’s attention, and normally state what will happen once a user interacts with them. A skillfully designed tailwind alert example can be accessed with 15 other free tailwind components on TUK, with all of them equipped with pre-built support for different frameworks including React, Angular, and Vue.

alert

Tailwind css Review component includes ratings about the website given by users. Reviews are used to judge a website’s authenticity and its value to some sort. Good reviews help a website maintain a good image and trust among its users. It is also great for social roofing. The tailwind review component will help users add a fine-looking review section to their websites. After a lot of research by the UI/UX designers, these components are made to ensure that the user has a valuable experience. Our Tailwind review components can be easily customized, making it easier for users to vary them according to different project requirements. Tailwind UI Kit components are completely modular, responsive, drop-in ready and tested for cross-browser compatibility. All the TUK components have integrations for React and most of them have Vue and Angular integrations as well.

review

feedback

An action panel is also known as a dialogue message window. It is a small window that triggers the user to make a decision or dive into additional information. The Tailwind  action panel doesn’t fill the whole screen and is commonly used for modal events that require users to take an action before they can carry on. Meaning, the action panel disables the main content until the user clicks on an element in the panel, crosses it, opens the given link,or engages with the CTA Buttons. Get user’s attention to take action, whether it be through filling out a form, visiting an external site, participating in a sign-up sheet, or just getting  their attention to act. They can include CTA buttons, toggles, links, icons and other actions such as subscriptions and payments etc. When an action panel window contains a smaller element, users don't have to load a completely new page just to access it. These come in handy for email capture, traffic conversion, promotional marketing, and website messaging/navigation as well.

action_panel

Dropdowns present a list of courses of action from which a single option is selected by the user or multiple. The chosen option can display a value in the form or be utilized to channel or sort the existing substance.Dropdowns can be utilized in structures on total pages, in modals, or on sideboards. It is an adapted version of the select component and can be styled depending on the requirement. Tailwind Dropdown components are tested for cross-browser funtionality and can be used in any Tailwind  project with built-in support for React, Angular, and Vue integrations. The Tailwind  dropdown components are designed according to three different variants of dropdowns that support multiple functionalities. It includes a simple dropdown that enables the user to select only one option, a multi-select that allows the user to check numerous checkboxes from a list, and a combination box that enables the user to choose from a list of potential or required values.

dropdown

Tailwind CSS Form Layout can be defined as the way forms are placed on a web page. Form Layout determines if the site is professional and simplistic looking or casual and fun looking. Form Layout Tailwind components are used to arrange fields with standard spacing. Many developers use drop in ready components to save time and avoid unnecessary mistakes while designing the forms. Tailwind UI Kit’s Form Layout components provide built-in support for different frameworks including React, Angular, and Vue. TUK has 9 different Tailwind form components in this category that can be used in various different ways. The many options include form layouts with toggles, form layouts with inputs and simple form layouts. One of the category that is form layout with steps can be used to make your page minimal and aesthetically pleasing. Tailwind CSS Form Layout components in TUK also gives cross browser compatibility which makes it unique from others.

form_layout

Input groups are also known as text fields or input fields. They provide users with the means to enter non-standardized responses. People often come across them when entering personal details, delivery addresses, email addresses, newsletter subscriptions, search bars, online queries/help. These fields can expedite and enhance interaction by encouraging customized information.   Tailwind Input groups are discoverable, they stand out and stipulate that information can be added by the users. All input group components have a different theme, colours and layouts giving you a variety to choose from. You also have the option to make an answer necessary by putting in an asterisk (*). The size; length and width of each box is also made in a manner to fit in the information required in a proportionate manner. These input fields also give feedback on wrong information such as incorrect passwords etc. 

input_group

Sign-in is the process through which an individual is given access to a computer network system by recognizing and registering themselves. The user has to enter the credentials to authenticate himself, including a username and a password that matches it.Tailwind sign-in layouts allow you to register and authenticate yourself. Every component from the three of our UI packs (Application, Marketing, and E-commerce) is designed with thorough research to use them in any of your projects, be it your personal or business project. They are also tested for cross-browser compatibility that you can drop in any of your Tailwind  projects with built-in support for React, Angular, and Vue.For users, this oftentimes implies that they can see their profile and data, change that data, and monitor the identifiers for them (profile picture, username, and so forth). Tailwind  sign-in component has different layouts, including a half-page with company name, a Half page with image, a half-page with an illustration,and a completely white page.

sign_in

A check box is used when a user has to answer a simple yes/no question, and the answer is either yes or no. Check boxes are empty when they are unchecked or show a tick or a cross when checked.Checkboxes allow the users to make several selections from several items.Tailwind check box components are tested for cross-browser compatibility. Moreover, Tailwind check box components have built-in support for React, Angular, and Vue.Checkboxes allow you to select one or more options from a limited number of choices available. It aids the user in making an educated decision and makes the user experience functional. These checkboxes also help the user be clear-minded and guide them about what will happen if they check the checkbox and what will happen if the checkbox is not checked. Tailwind checkbox component provides you with several design templates of checkboxes that include small check boxes, toggle with border, toggle thin, toggle rounded, and much more.

toggle_checkbox_radio

form

Graphs tell us how a certain thing varies under different conditions. Things that keep changing from starting point to the ending point can be represented in a graph showing the change they have gone through at every defined point. Graphs are used commonly in websites and also in other domains.  Visually seeing a graph showing the division or change in data makes it a lot easier to understand than seeing the same data written on paper. TUK’s graph components provide built-in support for different frameworks including React, Angular, and Vue. Graphs in your website and dashboard can visually represent the total RSVP count and know how people have reacted to your invitation, Selling overview of your business throughout the year to see the ups and downs in the sales, and registrations made on your website over a period of time.

graph

Tailwind heading component is used to add headlines to your website page that characterize content areas, give a title to a page, and are utilized for web indexes to drag site pages when an H1 heading is used. Page headings allow the users and search engines to understand the text and improve its readability of the text. The Tailwind heading component has various layouts of headings that can make a web page interacting and engaging.Page headings also help the search engines display relevant results; when a user jumps on a new page helps them find the information at a much faster pace than before. Every component from our UI Kits is designed after extensive research. It is then coded by one of our best developers. Like all components, the Tailwind  heading component is also tested for cross-browser functionality and is ready to use in any Tailwind  project and is built-in support for React, Angular, and Vue.

card_heading

The header is the top section of a web page. The header contains links to different important pages, your logo, contact information, and call to action buttons.Tailwind header is used to add information about the website. It primarily tells users what your website is all about. The header can also be used to make navigation easy and smooth. Nicely designed headers drive more traffic to your website and make the user stay once they visit. Website owners use headers to define the identity of their website. Tailwind header components have built-in support for React, Angular, and Vue.You can use these premade designs and customize them according to your vision if you want. TUK’s Tailwind header components allow you to experiment with a variety of designs. You can either make your search bar prominent or also make your logo stand out in your header. Add the social media handles in the header or a nice profile picture with your email using these components.

page_heading

heading

Tailwind CSS Note components are simple cards with multiple information on them. Notes can be used from marking down the daily tasks or just anything that you don’t want to forget.They are smaller in size and only a few words can be written on them. This forces user to be careful when choosing the right words and removing extraneous details. Note Tailwind components helps in managing the tasks properly without any hiccups and add symmetry to the workflow. The Tailwind UI Kit has different options for the Note Tailwind components, each of which provides built-in support for many frameworks, including React, Angular, and Vue. TUK is built using Tailwind CSS utility classes so Note Components can fit into any project that is using Tailwind CSS. User can either choose a light or dark theme,depending on the one that best matches the look of the website.

note

Tailwind CSS modal components are web page elements that displays in the front and deactivates the rest of the content on the page. It is also known as a modal window or a lightbox. Modal Tailwind components are often used to divert the users’ attention to an important action or information notice on a website. Users must either close the modal, or complete the specific action stated, in order to get back to the page’s content. Contact forms, signup/login forms, alerts/notices, help/tips and even an exit window, can also be displayed on a web interface with the use of Tailwind CSS modal windows. Modal windows also save space by eliminating large elements that aren’t needed on the main page. Simply open Tailwind UI Kit and select a Modal component from the overlay category in the Web application UI Kit and add it to your project.

modal

Notifications are used to draw a user’s attention to important information (failure, success,  follow request) or a status change. Certain symbols and colors are universally associated with different types of notifications. Tailwind  Notification components mostly pop up on the upper side of the screen and go away after the user interacts with it or keeps scrolling. Tailwind  notification category has a range of 20 different notification components that can be used in different types of web apps, dashboards, or even websites. This category has multiple CTA, single/multiple actions, information, colored, and no action notification components. This category also contains multiple notification panel components. Tailwind  UI Kit has a team of expert designers who incorporate essential design principles to build components for any kind of web application and dashboard. All of these components are rigorously tested for cross-browser compatibly and functionality. Tailwind  Notification category components have built-in support for React, Angular, and Vue.js. We have built all of our components using Tailwind  CSS and following the latest Web Content Accessibility Guidelines (WCAG).

notification

overlay

The Tailwind CSS table components serve as a holder for different components. Ideally, you should start your page with a table component, so it’s easy to position your components afterwards.The table component displays the data in a list format and contains interactive components such as chips, buttons, or menus. You can use the table Tailwind components to efficiently organize your projects’ data, tasks, users, invoices, orders, etc. The Tailwind UI Kit’s table component has built-in support for React, Angular, and Vue. The table components enable you to categorize your data by adding numerous rows and columns as per your requirement. You can even customize the styling of these table components with ease. TUK has advanced Tailwind CSS table components that give you complete authority over your information display with filters, actions, sort, and search buttons through which you can filter the data in a much easier way.

advance_table

Lists are a simple way of displaying data and elements in a table format. Tailwind  List category has a collection of 19 different components for static and dynamic elements. Tailwind  List components can be used in web applications and dashboards for the purpose of arranging elements in a table format. Some of the prominent functionalities of the lists are interactable task lists, checklists, bookmarks, and status updates. There are filters, user avatars, item drag, and CTAs so you can take complete control and provide a completely functional experience. Tailwind  List category can be used in Tailwind  CSS projects without any hassle. The list components also have visually pleasing dividers in the form of spacing, lines, or even other graphical elements. All of the components by TUK are compliant with Web Content Accessibility Guidelines (WCAG). There is support for React, Angular, and Vue in all of the list components below. All of the components in this category are fully responsive, functional, and rigorously tested for cross-browser compatibility.

list

table

webapp

Tailwind CSS 404 Error page components are returned as a HTTP standard response code, in computer network interchanges, to show that the program had the option to interact with a given server; however, the server couldn't discover what was requested by the user. 404 Error Page Tailwind components let the user know that their request has not been processed because of a mistake. Possibly, they have mistyped the URL, the page is not available temporarily, or no such page existed. It recognizes the problem with the request and leads them back to the relevant pages that they are trying to access. Tailwind Error page components can be used primarily to make the users feel that you care about their experience on your website or to showcase the personality of your business. Tailwind UI Kit’s 404 Error Pages components have built-in support for various different frameworks including React, Angular and Vue.

404_error_pages

Tailwind CSS CTA components are a prompt on a web page that tells the user to take specific action to further proceed to something. For Example: sign up, buy now, log in, etc… It is very common in marketing websites and it is essential for marketing websites too where businesses build hype around their product and the last thing to seal the deal is a CTA that would guide the user towards buying their product. TUK’s CTA Tailwind components provide built-in support for different frameworks including React, Angular, and Vue. Tailwind UI Kit has over twenty different expertly designed pre-made CTA components that users can use in their projects without compromising on the quality at all. The diverse components with cards, eye-catching color gradients, colorful backgrounds, CTAs with placeholders, and simple minimal design gives users the liberty to use them in countless capacities. All Tailwind CSS CTA components are fully responsive.

Tailwind CSS FAQ component stands for frequently asked questions, it can also consist of commonly asked questions. A FAQ gives quick answers to common questions that users mostly ask. FAQ Tailwind components are an integral part of a user's journey, and to ensure smooth navigation for majority websites.They’re one of the easiest ways to save time answering repetitive questions, gain new customers and close sales instantly.  FAQ page portrays thorough experience. Tailwind UI Kit has 12 different designs under the FAQ components category that users can use in various different ways. All of TUK’s components has built-in support for various different frameworks including React, Angular, and Vue. All the Tailwind CSS FAQ components are tested for cross-browser compatibility. Users can give different looks to their FAQ page by choosing from the TUK’s component library. They can either display a bold view or a list view with various color options according to their requirements.

Tailwind CSS About components gives users detailed information about something on the website. It can be a 'What we do' section, a company's history section, or a section with the mission statement details of a company. About Tailwind components have variations for diverse use cases. There are 16 components in this category with interactive buttons that can be used as links for external pages. Additionally, the components have beautifully arranged graphical elements that highlight illustrations that the users may use in those spaces. All of the elements in these components are highly interactive and customizable. All the components of the Tailwind CSS About category are completely functional, modular, and fully responsive with built-in support for React, Angular, and Vue.js. Tailwind UI Kit’s About components are built following the latest Web Content Accessibility Guidelines. The components are thoroughly tested for cross-browser compatibility for a consistent experience across different screen sizes, devices, and browsers.

about

Tailwind CSS blog components are an information platform with articles revolving around a number of different topics. Blogs normally have an informal vibe. It’s more like a person talking to the user and giving them opinions along with information. Blog Tailwind components are a great way to increase traffic on the website. The visitor will respect a site if it has informative blogs and users are actually getting to learn something from them. Writing quality blogs will make the website visitors share the blogs that will work as automatic marketing for users and will attract more traffic to their website. Tailwind UI Kit’s blog components also provide built-in support for various different frameworks including React, Angular, and Vue. TUK has fifteen different expertly designed pre-made blog components. Users can provide relevant information in the articles and display them using TUK’s perfectly crafted premade Tailwind CSS blog components.

blog

Tailwind CSS chat components allow users to communicate in a web application, dashboard, or website. Users can share images, send/receive texts, documents, files, and so on. In most marketing websites today, chat has become an essential feature as it allows users to communicate without leaving the window or switching through applications. Chat Tailwind components have the option of attaching files, emojis, etc. It can be a great addition to the marketing website where customers want to drop in for a quick chat before making a purchase. The component includes a chat list screen allowing to keep tabs on all active chats and new messages. Tailwind CSS chat components are tested for cross-browser compatibility. They're also fully responsive, drop-in ready, and customizable according to the design requirements. Like all of Tailwind UI Kit’s components, they also has React, Angular, and Vue.js integrations. All of chat components following Web Content Accessibility Guidelines.

chat

Tailwind CSS Cloud Logo components are displays of multiple logos that typically show brands and organizations that the company has worked for, or in collaboration with. It always puts a positive impression on users to read good things about a brand from other people. There are 10 components in the Tailwind CSS Cloud logo category that can be used in web applications, webstores, and websites. Users can show ratings of their product or the brand alongside the testimonials.Cloud Logo Tailwind components are completely responsive, modular, functional and ready-to-drop in any of the projects. All of the components are built with Tailwind CSS with built-in support for React, Angular, and Vue.js. Additionally, All of TUK’s components are built by our team of expert designers and developers following the latest WCAG. The components are thoroughly tested for cross-browser compatibility so users can provide a consistent experience across different screen sizes, devices, and browsers.

cloud_logo

Tailwind CSS Contact component contains the contact details including phone numbers, emails, and addresses. The contact section can also be a form or a map showing directions to your location. Contact Tailwind component is used to help people get in touch with you. New users often have a lot of questions and the contact section works as a gateway for them to reach an individual in the organization to answer their queries. Having a contact section also adds authenticity to the website. Tailwind UI Kit has 14 different contact component examples that the user can use in their projects in countless different ways. Users can either allow the customers to type their messages and send them to get a reply or they can add the details individually at the user’s disposal. TUK’s Tailwind CSS contact components include built-in support for various different frameworks including React, Angular, and Vue.

contact

Tailwind CSS Content components comprises of the information and work descriptions. Content components are multipurpose and can be used in a wide range of use cases. They can be used in Marketing websites for different products, offerings, services, blogs, etc where something needs a description or additional content to be displayed. Content Tailwind components category has 15 different components with different buttons, styling, color schemes, graphical elements, and more that allow you to use them in diverse projects. All the components of Tailwind UI Kit’s Content category are fully responsive, modular, and ready to drop in. The components are made using Tailwind CSS with support for React, Angular, and Vue. Additionally, the components are built by our expert team following the latest Web Content Accessibility Guidelines (WCAG). Tailwind Content components are also tested for cross-browser compatibility for consistent experiences across different screens sizes, devices, and browsers.

content

The features section prominently highlights what you’re offering and how the customer will benefit from those services.

feature

Tailwind Flyout menus are navigation tools that users can show or reveal when they interact with any control like a button or some action. With the help of Flyout menus users can access a list of choices or actions at their own will.Tailwind UI Kit has introduced these Flyout menus to create ease for the users and to help them add this extra functionality in their websites. Users can use our Flyout menus, purely made in Tailwind CSS to provide the entire website’s hierarchy in dropdowns that will also avoid multiple page loads and will save tons of time making the navigation easy. 

flyout_menu

Tailwind CSS footer components are similar to the document footers, with information given at the bottom of a page. It is a separate website section, below the fold. Majority sites include utility navigation, doormat navigation, or technical information in the footer area. It can also consist of links, copyrights, privacy policies, partnered brands, company information (about), and other features. Usually, the majority focuses on headers, and puts in most of their effort on content above the fold. Using footer Tailwind components is a great chance to enlighten potential customers about what the company has to offer. Thus, Tailwind CSS footer components could serve as a last resort to navigate info that is difficult to find.There are ample components for footers on Tailwind UI Kit, light or dark and each designed uniquely. They are also responsive and have been rigorously tested across multiple devices. They have built-in support for React, Angular and Vue.

footer

Tailwind CSS hero component is the region that quickly appears on the screen under the logo and menu. This part of the page should preferably incorporate data around four things: What a user have to bring to the table, why individuals should trust you—the advantages of working with you, and what to do next. Hero Tailwind components usually has a high-resolution background image to capture the user’s attention, a big highlighted text, and a button or two. The Tailwind CSS hero section has various design variations for diverse use cases. Moreover, the components of the hero section are beautifully designed and are ready to be integrated directly into the project. The component is highly interactive, tailored, and has built-in support for React, Angular, and Vue. Like all other components, the hero section component is also built using the latest Web Content Accessibility Guidelines (WCAG). Tailwind UI Kit’s components are also tested for cross-browser functionality.

hero

Tailwind CSS Newsletter component is a tool that allows website owners to directly share news, update information, or new campaigns with their users or subscribers. Newsletters help business owners to gain direct access to the subscriber’s inbox. Newsletter Tailwind components are used for email marketing. A newsletter is a form of communication between business owners and their customers. Tailwind UI Kit’s newsletter components provide built-in support for different frameworks including React, Angular, and Vue. TUK has eleven different expertly designed pre-made newsletter components examples. Users can keep their prospects and customers up to date about developments and product/service features when they subscribe to it using TUK’s Tailwind newsletter components. The different design choices help users give the desired feel to their website. Users can also use different appealing backgrounds for their page to look unforgettable from TUK’s Newsletter component examples. The ready-made HTML code is all a user needs to get started.

newsletter

Tailwind CSS Pricing component highlights different packages of a website's offerings at various price points. They can be used to highlight the features and benefits that the user would be getting in a package. The pricing Tailwind component category has 10 different variations of feature sections for various use cases. The components are easily customizable so users can make any styling changes or even come up with something themselves using these components or their elements as a base. The pricing sections category is built using Tailwind CSS with support for React, Angular, and Vue. All of Tailwind UI Kit's components are made by our expert designer and developers following the latest Web Content Accessibility Guidelines (WCAG). The components of this category are completely modular, responsive, and drop-in ready. Additionally, the components in this category are also tested rigorously for cross-browser compatibility so users can provide consistent experiences across different devices, screen sizes, and browsers.

pricing

It comprises of the cards to display multiple products or deals.

product

Tailwind CSS stats components highlight key statistics that a website showcases to customers and prospects in order to present expert authority. Tailwind stat components category has 13 different variations of sections for various use cases with diverse graphical arrangements. Users can easily customize any of these components according to their styling preference and project requirements. A good stat section is imperative in building a good first impression on your users. Stat Tailwind components are made by our expert team of designers after thorough UX research to ensure the right effect on the user experience. All of TUK's components are developed with built-in support for various different frameworks including React, Angular, and Vue. The components are rigorously tested for cross-browser compatibility so you can provide consistent experiences across different screen sizes, devices, and browsers. Tailwind UI Kit’s stat components examples are also compliant with the latest Web Content Accessibility Guidelines (WCAG).

stat

A Tailwind CSS Team is a section that has different names with pictures and little descriptions. Normally used to feature the important or all members of the team for the users to see. Team Tailwind components give an accessible face to user's business. Many businesses add the Team section to their websites so that the users know who will they be working with exactly. Tailwind UI kit’s Team components provide built-in support for different frameworks including React, Angular, and Vue along with cross-browser compatibility. TUK has a free Tailwind Team example component that can be used in various different ways. Users can add custom background pictures or gradient colors to give a premium look to their website. From making the section bold with descriptions for each member to adding tens of members with small pictures, there are various different looks users can give to your Team section using TUK’s Tailwind CSS Team component.

team

Tailwind CSS Testimonial components are customer reviews of your product or services and help you look more valuable to those exploring it for the first time. They are used for social proofing. The testimonial tailwind components category has 19 variations of the testimonial components that can be used for multiple purposes in a website. They make it look more valuable and believable to those who are using it for the first time. After ample research by the UI/UX designers, these components are made to ensure that the user has a valuable experience. These Tailwind Testimonial components can be easily tailored according to additional project requirements and styling preferences. The category has built-in support for different frameworks including React, Angular, and Vue. TUK's expert team makes the components following the latest Web content Accessibility Guidelines (WCAG). Tailwind UI Kit components are entirely modular, responsive, and drop-in ready and tested for cross-browser compatibility.

testimonial

page_section

marketing

An essential part of inbound marketing, the CTA section prompts the user to take a certain action with the objective of converting the user into a lead/customer.

CTAs

Tailwind CSS checkout components provide users to move to the payment process after they're done with selecting their desired products, similar to the physical checkout counter in a grocery store. Checkout pages come in two types: one-page checkout and multi-page checkout. One-page checkout is most commonly used. The checkout tailwind components have different design variations of the checkout page of a website that can be directly integrated into a project. Tailwind CSS checkout components can be used in multiple websites as it allows customers to add or remove products to their cart, select shipment options and payment methods. The components are tested for cross-browser functionality and have built-in support for Tailwind CSS with support for Angular, React, and Vue. Moreover, all the components of TUK are built using the latest Web Content Accessibility Guidelines (WCAG).

Checkouts

Frequently Asked Questions provide valuable information to the users about your product or service that helps them make an informed decision.

FAQs

A Tailwind CSS product review component is used to show the opinions and feedbacks of customers for a particular product or service. It contains product-centered content that investigates both the benefits and the drawbacks of the goods/services in depth, setting a business’s product/service apart from others, and helps build trust and loyalty with the brand. The importance of Product Reviews Tailwind components can be understood by the fact that 90% of customers read a review before making a purchase, and 72% are then prompted to take action after reading positive reviews. Product reviews are typically placed next to a product on a business’s website so potential customers can read them before making a purchase decision. Tailwind UI Kit has a variety of options for the Product Reviews component for every kind of website, containing built-in support for different frameworks including React, Angular, and Vue.

Product_Reviews

A Tailwind CSS banner component is used to display prominent messages, images, and related optional messages. They are persistent and nonmodal, prompting a user to either ignore it or interact with it at any time. Banner Tailwind components consist of a container, supporting illustration, text, and buttons, and have to be consistently at a prominent location throughout the website or app. Tailwind CSS banners are easily noticeable because of their size or their color, which normally draws attention; large ones are typically used for announcements, while others could help separate a business from the crowd. Banner ads are one of the most prolific forms of online advertising widely used in today’s marketing world. Featuring a wide variety of Banner designs to suit a user’s business needs, Tailwind UI Kit has 11 different banner examples that come with built-in support for different frameworks including React, Angular, and Vue

banners

Tailwind CSS Best Seller Components showcases the best and most popular products. It has items whose sales are among the highest in their class. The Best Sellers are products that are currently selling well among similar products at a given time. The Best Seller Tailwind components make it easier for the user to decide among different categories of products since these are the most liked products among all. Customer reviews along with the price of the product are displayed in this category. These products are here due to their high sale rate. The Tailwind UI Kit has different options for the Best Sellers components, each of which provides built-in support for many frameworks, including React, Angular, and Vue. It uses Tailwind CSS utility classes which makes it easy to be merged in any project. Users can go with any theme either dark or light, which suits their website.

best_sellers

Tailwind CSS Blog components are a section that provides users with relevant information that they might be seeking in the form of an article. Blogs help drive traffic to the website. Companies often have blog sections where they regularly create content to inform and educate their customers about the latest trends. The Blog Tailwind Components is a great way to start a conversation directly with the audience. Users can use blogs to encourage people to share feedback and thoughts with them. A blog is a perfect place to showcase valuable content. Tailwind UI Kit has different options for Blog components, each of which provides built-in support for many different frameworks, including React, Angular, and Vue. It uses Tailwind CSS utility classes which makes it easy to be merged in any Tailwind CSS project. Users can choose either a dark or light theme that best suits the website.

blogs

A Tailwind CSS Carousels Component , is an efficient way to display multiple images or content in the same space. This not only helps to save screen space, but it also encourages visitors to focus on the important content of the website and effectively improves the overall visual appeal. The Carousels Tailwind Components is basically a list of cards that can be shuffled to display different content; it allows multiple pieces of content to occupy a single space. The Tailwind UI Kit has different options for the Carousels Tailwind Components, each of which provides built-in support for many frameworks, including React, Angular, and Vue. This UI kit is built using Tailwind CSS utility classes so Carousels Tailwind Components can fit into any project that is using Tailwind CSS. You can either choose a light or dark theme,depending on the one that best matches the look of your site.

carousels

It informs the user on  how their data may be used.

cookies

Tailwind CSS feature component is a section that prominently highlights what product the website is offering and how the customer will benefit from those services. Normally this section would feature the products along with their prices and little descriptions. Featured Tailwind components are used to enhance the user experience. Adding it gives validity to both the website and the product. Feature component is also used to give a detailed yet minimal look to the website. Nicely designed features add positive value to the website. Tailwind UI Kit’s 16 different Feature component design examples can be used in various different ways. Users can add their products in the form of a list with little descriptions or they can show products individually with large descriptions. Users can also display different categories using Tailwind CSS Feature to add symmetry to the web page. TUK’s components have built-in support for different frameworks including React, Angular, and Vue.

featured

Filters provide a set of controls to reduce items in a collection based on attributes the user is interested in. 

filters

The footer comes at the bottom of the page and showcases information and navigation options as per your business goals.

footers

The hero section is the front and center of the page and it is the most prominent area in the homepage layout that showcases your brand.

heros

Highlights are sections with icons and columns, displaying information or giving insights to users. These sections also highlight features of the website that could draw attention of potential customers, as well as serve as a reminder of the benefits available. These highlight sections showcase important selling points of your products and services. Each feature box has its own call to action which allows users to learn more. They also allow users to understand the text without having to read it. These Tailwind  highlight boxes can also increase promotion and spread awareness about the brand. Tailwind  highlights can also make the content digestible and entertaining to read, even though each icon is competing with the one just beside it. The process of adding it to your website is also quite simple. Go to TUK and select a Tailwind  highlight from the component category in the Ecommerce UI Kit. Then, copy the HTML code given with each component, and paste it in your project. 

highlights

Use modals to inform users about specific action they need to take along with a message. Modals have pre-designed layout with certain UX that can be easily modified.

modals

Use this pattern for primary navigation. The navigation can be easily modified to add menu items and action item icons.

navigations

A newsletter is a tool that allows website owners to directly share news, update information or new campaigns with their users or subscribers. Newsletters help you gain direct access to the subscriber’s inbox.A newsletter is a form of communication between you and your customer. TUK’s Tailwind  newsletter components also provide built-in support for different frameworks including React, Angular, and Vue.TUK has eleven different expertly designed pre-made newsletter components designed by some of our best designers and coded by top-notch developers for you to use in your projects. You can keep your prospects and customers up to date about developments and product/service features when they subscribe to it using TUK’s Tailwind  newsletter components. You can use different appealing backgrounds. The responsive nature of these components helps your user with a smooth experience over a variety of devices. The ready-made HTML code is all you need to get started. Tailwind newsletter components are highly accessible and also have built-in support for react, angular, and vue makes them unique from others.

newsletters

Shows the summary of the order a user has placed, may include shipping address, total amount, payment method, and status.

order_summaries

Page headings are designed to use with primary navigation in pages. 

page_headings

Partners section is a display of multiple logos typically showing the brands and organizations that the company has worked for, or in collaboration with. It always puts a positive impression on your users to read good things about your brand from other people (or a person of authority).There are 7 components in the Tailwind partners category that can be used in web applications, webstores, and websites. Tailwind Partners category has components for testimonials from your users, customers, or collaborators. You can also show ratings of your product or your brand alongside these testimonials. Tailwind  partners category is completely responsive, modular, functional and ready-to-drop in any of your projects. All of the components are built with Tailwind  CSS. Tailwind partners category also has built-in support for React, Angular, and Vue.js. Additionally, All of TUK’s components are built by our team of expert designers and developers following the latest WCAG. We have thoroughly tested these components for cross-broser compatibility so you can provide a consistent experience across different screen sizes, devices, browsers.

partners

Product categories are a grouping of different products according to their type. There can be a number of factors that define a category. The difference in the interests of your customers can be divided into different categories. Similarly, you can have different categories for different age groups and lastly, you can have different categories based on the nature of different products. Tailwind product categories components also provide built-in support for different frameworks including React, Angular, and Vue.It helps you improve the search results for your customers. You can market a small set of products in a specific category separately making it easier to compete with similar products in the market too. You can categorize these products into many different groups using Tailwind product categories components. These components can be used in apparel websites or furniture websites with their variety of designs.  

product_categories

A product detail section provides all the information and details of your product on your Ecommerce site. The product details component appears when you click on a product from your product grid or any external link.Tailwind product details category has different variations on the basis of buttons (checkout, add to wishlist, favorite, etc), graphical arrangement, dropdowns, quantity, and so on.We have thoroughly tested all the components of Tailwind  product details category for cross-browser compatibility and functionality for consistent experiences across different screen sizes, devices, and browsers. These components are completely modular, functional, and fully responsive.Tailwind  product details category is built using the latest update of Tailwind  CSS and you don’t need any additional configuration to implement these components in your projects. Tailwind  product details category also has built-in support for React, Angular, and Vue.js integrations. Our team of expert designers and developers, build these components after quite some research, using the latest Web Content Accessibility Guidelines (WCAG).

product_details

Product grids are used to display offerings in a systematic layout. There are several other elements in a product grid such as add to cart, color options, a like button for favorites, ratings, and so on. In addition to filters, there’s also a check panel to filter options and find the exact product that a customer could be looking for. Tailwind product grid category has different variations of components.Tailwind  product grids category has 4 different components that are expertly designed for different design, store, and product requirements. Our team has tested these Tailwind  product grid category components and their elements for cross-browser compatibility. The components in Tailwind  product grids category are completely modular, functional, and fully responsive so you can implement them in your project without any worries. Tailwind product grids category is built using the latest update of Tailwind CSS. These components also have support for React, Angular, and Vue.js integrations. Our team of expert designers and developers has built these components using the latest WCAG.

product_grids

As the name suggests, quick views provide a quick glance in a modal

quick_views

A shopping cart is the collection of selected products displayed together with their quantity and price. It displays all the products that you have clicked to buy. It’s important to have a unique shopping cart that exhibits the same or elevated experience as it is the last step of the purchase. It’s also imperative to provide multiple actions of changing quantities, deleting/adding items, and going back to scrolling through the products. Tailwind  Shopping category has 4 uniquely styled and designed components. All the elements in these components are fully functional and can be integrated easily into your Ecommerce projects. The variations have different arrangements, visual elements, actions, etc. The components in Tailwind  Shopping cart category are completely modular, functional, and fully responsive. Tailwind  Shopping cart category is built using the latest update of Tailwind  CSS. There is no additional configuration required at any point to implement these components in your projects. These components also have support for React, Angular, and Vue.js.

shopping carts

Socials are the handles of the social media accounts of a business. Facebook and Instagram are completely changing social media marketing by taking over this ground. Tailwind socials components are used by top-class developers all around the world in their projects.The socials help you grow on social media and eventually doing wonders for your business. Customers when like your product spread your name on social media and help you with free publicity TUK’s Tailwind  socials components also provide built-in support for different frameworks including React, Angular, and Vue.You can use TUK’s Tailwind  socials components to add a beautiful-looking Socials section to your website. You can display your gallery of pictures with a link to your Instagram handle or Facebook business page. The already skillfully designed components will allow you to forget about the design stress.

socials

Wishlists are a collection of items a user saved for later and did not buy. Wishlists make it easier for the user to go back and access the desired products without having to search everything. Wishlists are are a list of products that the shopper liked but did not want to buy immediately that way wishlists tell you what products are liked by users. Tailwind  wishlists are used for many things including keeping track of your customers and knowing their interests. You can also manage the out-of-stock items. TUK’s Tailwind  wishlists components also provide built-in support for different frameworks including React, Angular, and Vue.These Tailwind wishlists components can be used in your e-commerce websites to create an alluring wishlists section. The “add to card”, “preview” and “delete” options will make it easier for the customer to take desired actions. You have the option of either displaying 3 items at a time or four with two different designs. 

wishlists

Components

E-commerce

thin_with_steps

progress_bar_6

progress_bar_5

progress_bar_4

progress_bar_3

progress_bar_2

progress_bar_1

thin_with_sub_text

thin_with_progress_and_eta

thin_with_divided_steps

thin_vertical_grouped

thin_simple

small_circle

large_with_steps

large_circle_with_sub_text

broad_with_sub_text

broad_with_progress_and_eta

broad_with_divided_steps

broad_vertical_grouped

broad_simple

Tailwind Progress bar components inform users of how close they are to completing a set of tasks by showing the proportion of completion

progress bar

thin with steps

progress bar 6

progress bar 5

progress bar 4

progress bar 3

progress bar 2

progress bar 1

thin with sub text

thin with progress and eta

thin with divided steps

thin vertical grouped

thin simple

small circle

progress bar

large with steps

large circle with sub text

broad with sub text

broad with progress and eta

broad with divided steps

broad vertical grouped

broad simple