Safari mockup Browser page
This component is a mockup of a Safari browser window, featuring a realistic and responsive design created with Tailwind CSS. It includes the following elements:
Tab Bar: Positioned at the top of the window, the tab bar showcases an active tab with a favicon and a title. The active tab is highlighted with a background color and border for clarity.
Toolbar: Below the tab bar, the toolbar mimics the Safari browser's functionality with close, minimize, and maximize buttons. It also features an address bar pre-filled with a URL, styled for a polished look.
Navigation Buttons: The toolbar contains navigation buttons designed with SVG icons to represent back, forward, and other standard browser actions.
Content Area: The main section of the browser window, styled to display content within the mockup. It includes a heading and a description to illustrate the use of the component.
This tailwind example is contributed by Mahmoud Abdelaziz Salama, on 16-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are simulation,copy,dummy,miniature,like
Author Mahmoud Abdelaziz Salama
Related Examples
-
2 months ago437 -
Modern Responsive Pricing Section with ToggleA sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.
1 month ago64 -
Comparison Pricing Table ComponentA responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.
1 month ago99 -
CalculatorThis calculator uses CSS although it can be passed directly to tailwind
9 months ago1.5k -
iPhone 15 MockupThe "Screen Content" div can be manipulated to have anything inside the screen.
6 months ago961 -
Macbook Air 13" MockupA gorgeous component that can be used for landing pages, hero statements and more. Interested in our UI library? Check out the discord link in my bio.
6 months ago1.4k -
Website MockupAn Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.
7 months ago1.4k -
Responsive 3-Tier Pricing Card SectionA clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.
1 month ago131 -
Tailwind CSS Service Card ComponentAn HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.
1 month ago245 -
2 years ago9.9k -
1 year ago2k -
CSS-BoyInspired by the Pip-Boy Model 3000 from Fallout: New Vegas. Comes with multiple pages and some animations. All decorative background elements disappear when the screen is <sm (it's responsive).
1 week ago56
Explore components by Tags
Didn't find component you were looking for?
Search from 2100+ components
