A Pen by Leonardo Wehrmeister on CodePen.
Created
July 8, 2022 14:43
-
-
Save wesee/0e2aa61023c102e820519774939c44c4 to your computer and use it in GitHub Desktop.
Material dynamic colors by Beercss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| nav.top | |
| button.circle.flat(onclick="theme('https://tailwindcss.com/_next/static/media/classic-utility-jacket.0f108046e151c8576017eaf383406fe6.jpg')") | |
| img.responsive(src="https://tailwindcss.com/_next/static/media/classic-utility-jacket.0f108046e151c8576017eaf383406fe6.jpg") | |
| button.circle.flat(onclick="theme('https://tailwindcss.com/_next/static/media/kids-jumper.47a06f045002a3e6ba595351a36a46eb.jpg')") | |
| img.responsive(src="https://tailwindcss.com/_next/static/media/kids-jumper.47a06f045002a3e6ba595351a36a46eb.jpg") | |
| button.circle.flat(onclick="theme('https://tailwindcss.com/_next/static/media/fancy-suit-jacket.380b02296e758f6a462590ecfb936789.jpg')") | |
| img.responsive(src="https://tailwindcss.com/_next/static/media/fancy-suit-jacket.380b02296e758f6a462590ecfb936789.jpg") | |
| button.circle.flat(onclick="theme('https://tailwindcss.com/_next/static/media/retro-shoe.ee965cd22237d00d4225236bbaf5edc1.jpg')") | |
| img.responsive(src="https://tailwindcss.com/_next/static/media/retro-shoe.ee965cd22237d00d4225236bbaf5edc1.jpg") | |
| button.circle.flat(onclick="theme('https://tailwindcss.com/_next/static/media/beach-house.02381ba1b6293047997200a3099d03cb.jpg')") | |
| img.responsive(src="https://tailwindcss.com/_next/static/media/beach-house.02381ba1b6293047997200a3099d03cb.jpg") | |
| button.circle.flat(onclick="mode()") | |
| i light_mode | |
| main.responsive | |
| h2.bold.page.top.active Material dynamic colors | |
| .large-space | |
| h3.bold.page.right.active Build whatever you want, seriously. | |
| .large-divider | |
| article.no-padding.round | |
| .row.no-space | |
| .col.s12.m4.s | |
| img.responsive.extra.top-round(src="https://tailwindcss.com/_next/static/media/classic-utility-jacket.0f108046e151c8576017eaf383406fe6.jpg") | |
| .col.s12.m4.m.l | |
| img.responsive.extra.left-round(src="https://tailwindcss.com/_next/static/media/classic-utility-jacket.0f108046e151c8576017eaf383406fe6.jpg") | |
| .col.s12.m8.padding | |
| .row.no-wrap.middle-align | |
| .col | |
| h5.no-margin Classic Utility Jacket | |
| span In stock | |
| .col.min | |
| h6 $110,00 | |
| nav | |
| a.chip.square.active XS | |
| a.chip.square S | |
| a.chip.square M | |
| a.chip.square L | |
| a.chip.square XL | |
| label.l Size guide | |
| .large-divider | |
| nav | |
| button.flat Buy now | |
| button.border Add to bag | |
| button.border | |
| i favorite | |
| p Free shipping on all continental US orders. | |
| article.round.border | |
| .row.no-space | |
| .col.s12.m4 | |
| img.responsive.extra.round(src="https://tailwindcss.com/_next/static/media/kids-jumper.47a06f045002a3e6ba595351a36a46eb.jpg") | |
| .col.s12.m8.padding | |
| h6.no-margin.bold Kids Jumpsuit | |
| h5.bold.middle-align | |
| span $39,00 | |
| label In stock | |
| nav | |
| a.chip.circle XS | |
| a.chip.circle S | |
| a.chip.circle M | |
| a.chip.circle L | |
| a.chip.circle XL | |
| label.l Size guide | |
| .large-divider | |
| nav | |
| button.flat.round Buy now | |
| button.flat.round Add to bag | |
| button.flat.circle | |
| i favorite | |
| p Free shipping on all continental US orders. | |
| article.small-padding | |
| .row.no-space | |
| .col.s12.m4 | |
| img.responsive.extra(src="https://tailwindcss.com/_next/static/media/fancy-suit-jacket.380b02296e758f6a462590ecfb936789.jpg") | |
| .col.s12.m8.large-padding | |
| h5.no-margin Dogtooth Style Jacket | |
| h6.middle-align | |
| span $39,00 | |
| label In stock | |
| nav | |
| a.chip.circle XS | |
| a.chip.circle S | |
| a.chip.circle M | |
| a.chip.circle L | |
| a.chip.circle XL | |
| label.l Size guide | |
| .large-divider | |
| nav | |
| button.flat.large Buy now | |
| button.large.border Add to bag | |
| button.large.border.square | |
| i favorite | |
| p Free shipping on all continental US orders. | |
| article.flat.top-shadow.white-text | |
| .row.no-space | |
| .col.s12.m4.padding | |
| img.responsive.large(src="https://tailwindcss.com/_next/static/media/retro-shoe.ee965cd22237d00d4225236bbaf5edc1.jpg") | |
| .col.s12.m8.padding | |
| h5.no-margin Retro Shoe | |
| h6.middle-align $39,00 | |
| label.bold In stock | |
| nav | |
| a.chip.circle.bottom-round.right-round XS | |
| a.chip.circle.bottom-round.right-round S | |
| a.chip.circle.bottom-round.right-round M | |
| a.chip.circle.bottom-round.right-round L | |
| a.chip.circle.bottom-round.right-round XL | |
| label.l Size guide | |
| .large-divider | |
| nav | |
| button.flat Buy now | |
| button.border Add to bag | |
| button.none | |
| i favorite | |
| p Free shipping on all continental US orders. | |
| .large-space | |
| h3.bold Responsive everything. | |
| .large-divider | |
| article.no-padding.flat | |
| .row.no-wrap.middle-align | |
| .col | |
| .s | |
| img.responsive.large(src="https://tailwindcss.com/_next/static/media/beach-house.02381ba1b6293047997200a3099d03cb.jpg") | |
| .absolute.left.bottom.right.bottom-shadow.s.padding | |
| div Entire house | |
| h5 Beach House in Collingwood | |
| .large-padding | |
| .m.l | |
| div Entire house | |
| h5 Beach House in Collingwood | |
| div | |
| nav | |
| i star | |
| a 4.94 | |
| a (128) | |
| a Collingwood, Ontario | |
| .m.l.large-divider | |
| nav | |
| a | |
| img.circle(src="https://tailwindcss.com/_next/static/media/kevin-francis.c9970f19128315df0cfda2b4f54eb981.jpg") | |
| a.bold Hosted by Kevin Francis | |
| nav | |
| button.flat.large Check availability | |
| .col.m.l.large-padding | |
| img.responsive.large.round(src="https://tailwindcss.com/_next/static/media/beach-house.02381ba1b6293047997200a3099d03cb.jpg") | |
| .space.l | |
| .row.no-wrap.l | |
| .col.min | |
| img.round.extra(src="https://tailwindcss.com/_next/static/media/beach-house-interior-1.bc69273a536a51bb58092b2896b92e3a.jpg") | |
| .col.min | |
| img.round.extra(src="https://tailwindcss.com/_next/static/media/beach-house-interior-2.de1a47680b1fb31d36d1130dc925b197.jpg") | |
| .col |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const theme = async(from) => { | |
| await ui("theme", from); | |
| }; | |
| const mode = () => { | |
| let newMode = ui("mode") == "dark" ? "light" : "dark"; | |
| ui("mode", newMode); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/material-dynamic-colors.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment