Give it a click if you like.Ī simple success alert with an example link. Use this example to add a border accent on top of the alert component for further visual distinction.Ī simple danger alert with an example link. Give it a click if you like.Ī simple dark alert with an example link. Info Ensure that these requirements are met: At least 10 characters (and up to 100 characters) At least one lowercase character Inclusion of at least one special character, e.g., ! # ? Danger Ensure that these requirements are met: At least 10 characters (and up to 100 characters) At least one lowercase character Inclusion of at least one special character, e.g., ! # ? Expand codeĪ simple info alert with an example link. Use this example to show a list and a description inside an alert component. Use this example to add a border accent to the alert component instead of just a plain background. Info Dark alert! Change a few things up and try submitting again. Info Warning alert! Change a few things up and try submitting again. Info Success alert! Change a few things up and try submitting again. Info Danger alert! Change a few things up and try submitting again. Info Info alert! Change a few things up and try submitting again. You can also include a descriptive icon to complement the message inside the alert component with the following example. Dark alert! Change a few things up and try submitting again. Warning alert! Change a few things up and try submitting again. Success alert! Change a few things up and try submitting again. Danger alert! Change a few things up and try submitting again. We’ve only used one breakpoint in this example, but you could easily customize this component at other sizes using the sm, lg, xl, or 2xl responsive prefixes as well.Info alert! Change a few things up and try submitting again. On medium screens and up, we’ve constrained the width to a fixed size and ensured the image is full height using md:h-full md:w-48. On small screens the image is automatically full width by default.Technically we could have just used shrink-0 since it would do nothing on smaller screens, but since it only matters on md screens, it’s a good idea to make that clear in the class name. When the parent is a flex container, we want to make sure the image never shrinks, so we’ve added md:shrink-0 to prevent shrinking on medium screens and larger. By default, the outer div is display: block, but by adding the md:flex utility, it becomes display: flex on medium screens and larger.Company retreats Incredible accommodation for your team Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine? We have a list of places to do just that. Here’s a simple example of a marketing page component that uses a stacked layout on small screens, and a side-by-side layout on larger screens (resize your browser to see it in action): This works for every utility class in the framework, which means you can change literally anything at a given breakpoint - even things like letter spacing or cursor styles. To add a utility but only have it take effect at a certain breakpoint, all you need to do is prefix the utility with the breakpoint name, followed by the : character: There are five breakpoints by default, inspired by common device resolutions: Breakpoint prefix Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |