www.material-tailwind.com Open in urlscan Pro
188.114.96.3  Public Scan

Submitted URL: http://www.material-tailwind.com/
Effective URL: https://www.material-tailwind.com/
Submission: On May 13 via api from US — Scanned from NL

Form analysis 1 forms found in the DOM

Name: mc-embedded-subscribe-formPOST https://gmail.us13.list-manage.com/subscribe/post?u=2343d646c60fd2780c7858d3b&id=aae21e5fd9&f_id=00c88fe4f0

<form action="https://gmail.us13.list-manage.com/subscribe/post?u=2343d646c60fd2780c7858d3b&amp;id=aae21e5fd9&amp;f_id=00c88fe4f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank"
  class="!tw-mt-4 ZmxleA ZmxleGNvbA anVzdGlmeWVuZA Z2FwNA md:ZmxleHJvdw lg:bXQw">
  <div class="bXQ2 d2Z1bGw lg:bXQw lg:dzgvMTI">
    <div class="cmVsYXRpdmU d2Z1bGw bWludw[200px] aDEx bWludw[100px]"><input required="" type="email" name="EMAIL" id="mce-EMAIL" placeholder="Enter your email"
        class="cGVlcg d2Z1bGw aGZ1bGw Ymd0cmFuc3BhcmVudA dGV4dGJsdWVncmF5NzAw Zm9udHNhbnM Zm9udG5vcm1hbA b3V0bGluZQ b3V0bGluZTA focus:b3V0bGluZTA disabled:YmdibHVlZ3JheTUw disabled:YjA dHJhbnNpdGlvbmFsbA placeholder-shown:tw-border placeholder-shown:tw-border-blue-gray-200 placeholder-shown:tw-border-t-blue-gray-200 Yg focus:YjI YnR0cmFuc3BhcmVudA focus:YnR0cmFuc3BhcmVudA placeholder:opacity-0 focus:placeholder:opacity-100 dGV4dHNt cHgz cHkz cmRtZA YmJsdWVncmF5MjAw focus:YmdyYXk5MDA !tw-border-[1.5px] !tw-border-blue-gray-50 !tw-bg-white cHk2 !tw-px-4 dGV4dHByaW1hcnk !tw-ring-transparent placeholder:tw-text-gray-600 focus:!tw-border-primary focus:!tw-border-t-primary focus:cmluZ3ByaW1hcnkvMjA"><label
        class="ZmxleA d2Z1bGw aGZ1bGw c2VsZWN0bm9uZQ cG9pbnRlcmV2ZW50c25vbmU YWJzb2x1dGU bGVmdDA Zm9udG5vcm1hbA !otw-verflow-visible dHJ1bmNhdGU peer-placeholder-shown:tw-text-blue-gray-500 bGVhZGluZ3RpZ2h0 peer-focus:tw-leading-tight peer-disabled:tw-text-transparent peer-disabled:tw-peer-placeholder-shown:tw-text-blue-gray-500 dHJhbnNpdGlvbmFsbA -tw-top-1.5 peer-placeholder-shown:tw-text-sm dGV4dA[11px] peer-focus:tw-text-[11px] before:tw-content[' '] before:tw-block before:tw-box-border before:tw-w-2.5 before:tw-h-1.5 before:tw-mt-[6.5px] before:tw-mr-1 peer-placeholder-shown:before:tw-border-transparent before:tw-rounded-tl-md before:tw-border-t peer-focus:before:tw-border-t-2 before:tw-border-l peer-focus:before:tw-border-l-2 before:tw-pointer-events-none before:tw-transition-all peer-disabled:before:tw-border-transparent after:tw-content[' '] after:tw-block after:tw-flex-grow after:tw-box-border after:tw-w-2.5 after:tw-h-1.5 after:tw-mt-[6.5px] after:tw-ml-1 peer-placeholder-shown:after:tw-border-transparent after:tw-rounded-tr-md after:tw-border-t peer-focus:after:tw-border-t-2 after:tw-border-r peer-focus:after:tw-border-r-2 after:tw-pointer-events-none after:tw-transition-all peer-disabled:after:tw-border-transparent peer-placeholder-shown:tw-leading-[4.1] dGV4dGdyYXk1MDA peer-focus:tw-text-gray-900 before:tw-border-blue-gray-200 peer-focus:before:!tw-border-gray-900 after:tw-border-blue-gray-200 peer-focus:after:!tw-border-gray-900 aGlkZGVu">
        <span class="aW5saW5lYmxvY2s dGV4dHJlZDUwMA bWww.5">*</span></label></div>
  </div><button type="submit" name="subscribe" id="mc-embedded-subscribe"
    class="YWxpZ25taWRkbGU c2VsZWN0bm9uZQ Zm9udHNhbnM Zm9udGJvbGQ dGV4dGN0cg dXBwZXJjYXNl dHJhbnNpdGlvbmFsbA disabled:b3BhY2l0eTUw disabled:c2hhZG93bm9uZQ disabled:cG9pbnRlcmV2ZW50c25vbmU dGV4dHNt cHkz.5 cHg3 cmRsZw bg-gray-900 dGV4dHdoaXRl c2hhZG93bWQ c2hhZG93Z3JheTkwMC8xMA hover:c2hhZG93bGc hover:c2hhZG93Z3JheTkwMC8yMA focus:b3BhY2l0eQ[0.85] focus:c2hhZG93bm9uZQ active:b3BhY2l0eQ[0.85] active:c2hhZG93bm9uZQ YmdncmF5OTAw gap-3 bXQy c2hyaW5rMA dGV4dGJhc2U Zm9udG1lZGl1bQ Y2FwaXRhbGl6ZQ md:bXQw md:d2F1">Subscribe</button>
</form>

Text Content

NEW
Material Tailwind Blocks, a comprehensive compilation of

200+

blocks, now available for your use. Check out

Material
Tailwind

Docs
Pro
Blocks
Figma
Book
Blog
Sign In
⌘K
SearchKab

3.4K
Pricing & FAQ
Docs
Pro
Blocks
Figma
Book
Blog
Sign In
⌘K
SearchKab

3.4K
Pricing & FAQ
New
Order now UI/UX Book - 50% OFF!


THE TAILWIND CSS COMPONENTS LIBRARY FOR CODING 10X FASTER

Material Tailwind is an open-source library that uses the power of Tailwind CSS
and React to help you build unique web projects faster and easier. The stunning
design inspired by Material Design is a bonus!

NPM I @MATERIAL-TAILWIND/REACT


Get Started

NPM INSTALLS


1,000,000+

LIVE PROJECTS


20,000+

GITHUB STARS


2,500+

COMPONENTS


460+


TAILWIND CSS FRAMEWORK INTEGRATIONS

Enhance your workflow with seamless integrations for your favorite tools using
Material Tailwind.

React

Open-source JavaScript framework and library developed by Facebook.

Html

The standard markup language for creating Web pages.

Next.js

React framework that gives you building blocks to create web apps.

Create React App

Set up a modern web app by running one command.

Remix

Full stack web framework that lets you focus on the user interface.

Vite

Flexible programmatic APIs with full TypeScript typing.

Astro

All-in-one web framework designed for speed.

Gatsby

The Fastest Frontend for the Headless Web.


MATERIAL TAILWIND - FREE


EXPLORE SOME OF ITS FEATURES

Get Material Tailwind and take advantage of its free components and features
that will help you set up your web project quickly.

CODE BETTER, LAUNCH FASTER


WITH YOUR FAVORITE FRAMEWORK

Material Tailwind comes with stunning fully coded components based on React or
HTML. Choose you favorite version! Angular and Vue.js components coming soon.

REACT

TAILWIND CSS

Soon

ANGULAR

Soon

VUE.JS

CSS COMPONENTS


CODE FAST. CODE CONSISTENTLY

Our Tailwind CSS components library provides a simple way to customize your
button; you can change the colors, fonts, styling, and everything you need.

Button

DEFAULT

GRADIENT

LINK

ICON

GLOBAL STYLE


AWESOME COLOR PALETTE AND REALISTIC SHADOWS.

Enhance your web product with our vibrant color palettes and realistic shadows,
creating a memorable user experience that breathes life into your design.

Explore



READY-TO-USE


460+ TAILWIND CSS COMPONENTS

Our ready-to-use Tailwind CSS components, like buttons, inputs, cards, tables,
and more, will help you create visually appealing web pages for your project in
a fraction of the time!

ACCORDION



ALERT



AVATAR



BADGE



BREADCRUMBS



BUTTON



BUTTON GROUP



CARD



CHECKBOX



CHIP



COLLAPSE



CAROUSEL



DIALOG



DRAWER



ICON BUTTON



INPUT



FORM



LIST



MENU



NAVBAR



POPOVER



PROGRESS BAR



PAGINATION



RADIO BUTTON



RATING BAR



SELECT



SLIDER



SPEED DIAL



SPINNER



STEPPER



SWITCH



TABS



TEXT AREA



TIMELINE



TOOLTIP



TYPOGRAPHY



FOOTER



IMAGE



VIDEO



SIDEBAR



TABLE


LEVEL UP: MATERIAL TAILWIND PRO


PREMIUM TAILWIND CSS COMPONENTS

Build faster your website with our exclusive collection of stunning components
and sections that will get you started in no time!


200+

GLOBAL STYLE

Awesome color palette and realistic shadows.


100+

CSS COMPONENTS

Material Tailwind comes with a huge number of Fully Coded CSS components.


2

POPULAR TECHNOLOGIES

Specially designed for React and HTML developers.


200+

READY-MADE SECTIONS

Fully coded sample sections so you could start working instantly.


Material Tailwind PROPricing & FAQ


A MUST-HAVE


FIGMA DESIGN FILES

Now, you can effortlessly customize and prototype your designs, saving valuable
time while ensuring smooth collaboration with your team.


COLOR PALETTE

Inspired by Material Design.Create a color theme that perfectly matches your
style and brand!.


FIGMA VARIANTS

Each component comes with multiple design variants for endless creative
possibilities. Add our ready-styled components to your project or modify them as
you would like.


TYPOGRAPHY

Our Figma Design Files come with implemented text styles for consistent design.


BUILT FOR DESKTOP AND MOBILE

Forget about responsiveness. With Material Tailwind we got you covered! Our
design files are using features like Constraints and Auto Layout.


AUTO LAYOUT

Our design files feature auto layout from Figma, making it easy to change the
order and width of columns and rows

Explore in FigmaPricing & FAQ


JOIN OUR COMMUNITY

Visit our communities to see the latest updates and news regarding our product.
Whether you have questions, ideas to contribute, or simply want to connect with
like-minded individuals, our communities provide a vibrant and supportive
environment for your.

GITHUB

Get it free on Github and please help us spread the news with a Star.

Visit

DISCORD

For issues, feature requests and contribute.

Join

TWITTER

For announcements, articles, and other resources.

Visit

COMMUNITY CONTRIBUTORS

Join our community of open-source
contribuitors.

Join



SIGN UP FOR OUR NEWSLETTER

Join our newsletter and get news in your inbox every week! We hate spam too, so
no worries about this.

*
Subscribe

MATERIAL TAILWIND

Easy to use React components for Tailwind CSS and Material Design.


Company
 * About Us
 * Blog
 * Github
 * Free Products

Help and Support
 * Knowledge Center
 * Contact Us
 * Premium Support
 * Pricing

Resources
 * Documentation
 * Custom Development
 * Discord
 * Tailwind Components
 * Free Tailwind CSS Blocks

Tehnologies
 * React
 * HTML

--------------------------------------------------------------------------------

Powered by
Copyright © 2024 Material Tailwind by Creative Tim. Made with ❤️ for a better
web.