diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts index 8ad41d97f5..f922932df3 100644 --- a/apps/demo/emails/tailwind.config.ts +++ b/apps/demo/emails/tailwind.config.ts @@ -5,6 +5,17 @@ export default { theme: { fontFamily: { amazon: ['Ember', 'Helvetica', 'Arial', 'sans-serif'], + koala: [ + '-apple-system', + 'BlinkMacSystemFont', + 'Segoe UI', + 'Roboto', + 'Oxygen-Sans', + 'Ubuntu', + 'Cantarell', + 'Helvetica Neue', + 'sans-serif', + ], raycast: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', slack: @@ -53,12 +64,12 @@ export default { airbnb: [ '-apple-system', 'BlinkMacSystemFont', - 'Segoe UI', + '"Segoe UI"', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', - 'Helvetica Neue', + '"Helvetica Neue"', 'sans-serif', ], apple: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif'], diff --git a/apps/demo/emails/welcome/koala-welcome.tsx b/apps/demo/emails/welcome/koala-welcome.tsx index 5ec1ebe0bc..1267a887ae 100644 --- a/apps/demo/emails/welcome/koala-welcome.tsx +++ b/apps/demo/emails/welcome/koala-welcome.tsx @@ -8,8 +8,10 @@ import { Img, Preview, Section, + Tailwind, Text, } from '@react-email/components'; +import tailwindConfig from '../tailwind.config'; interface KoalaWelcomeEmailProps { userFirstname: string; @@ -24,39 +26,47 @@ export const KoalaWelcomeEmail = ({ }: KoalaWelcomeEmailProps) => ( - - - The sales intelligence platform that helps you uncover qualified leads. - - - Koala - Hi {userFirstname}, - - Welcome to Koala, the sales intelligence platform that helps you - uncover qualified leads and close deals faster. - -
- -
- - Best, -
- The Koala team - -
- - 470 Noor Ave STE B #1148, South San Francisco, CA 94080 - - - + + + + The sales intelligence platform that helps you uncover qualified + leads. + + + Koala + + Hi {userFirstname}, + + + Welcome to Koala, the sales intelligence platform that helps you + uncover qualified leads and close deals faster. + +
+ +
+ + Best, +
+ The Koala team + +
+ + 470 Noor Ave STE B #1148, South San Francisco, CA 94080 + + + + ); @@ -65,48 +75,3 @@ KoalaWelcomeEmail.PreviewProps = { } as KoalaWelcomeEmailProps; export default KoalaWelcomeEmail; - -const main = { - backgroundColor: '#ffffff', - fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', -}; - -const container = { - margin: '0 auto', - padding: '20px 0 48px', -}; - -const logo = { - margin: '0 auto', -}; - -const paragraph = { - fontSize: '16px', - lineHeight: '26px', -}; - -const btnContainer = { - textAlign: 'center' as const, -}; - -const button = { - backgroundColor: '#5F51E8', - borderRadius: '3px', - color: '#fff', - fontSize: '16px', - textDecoration: 'none', - textAlign: 'center' as const, - display: 'block', - padding: '12px', -}; - -const hr = { - borderColor: '#cccccc', - margin: '20px 0', -}; - -const footer = { - color: '#8898aa', - fontSize: '12px', -}; diff --git a/demo.html b/demo.html deleted file mode 100644 index 45e2ab8f46..0000000000 --- a/demo.html +++ /dev/null @@ -1,581 +0,0 @@ - - - - - - - - - - - - - - - - - -
-
- #CodePenChallenge: Cubes -
-  ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ -
-
- - - - - - -
- codepen -
- - - - - - -
-

- View this Challenge on CodePen -

-

- This week: #CodePenChallenge: -

- Cubes -

-

- - - - - - -
-

- The Shape challenge continues! -

-

- Last week, we kicked things off with round shapes. - We "rounded" up the Pens from week one - in our - #CodePenChallenge: Round - collection. -

-

- This week, we move on to cubes 🧊 -

-

- Creating cubes in the browser is all about mastery - of illusion. Take control of perspective and - shadows and you can make the magic of 3D on a flat - screen 🧙 -

-

- This week is a fun chance to work on your CSS - shape-building skills, or dig into a 3D JavaScript - library like Three.js. -

-

- This week's starter template features an ice - cube emoji to help inspire a "cool" idea - for your Pen. As always, the template is just as - jumping off point. Feel free to incorporate the 🧊 - in your creation, add more elements, or freeze it - out completely and start over from scratch! -

-

- 💪 Your Challenge: - create a Pen that includes cube shapes. -

- codepen - - - - - - -
- codepen -

- CodePen PRO combines a bunch of features - that can help any front-end designer or - developer at any experience level. -

- Learn More -
-
-

- To participate: - Create a Pen → - and tag it - codepenchallenge - and - cpc-cubes. We'll be watching and gathering the Pens into a - Collection, and sharing on - Twitter - and - Instagram - (Use the #CodePenChallenge tag on Twitter and Instagram as - well). -

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

- IDEAS! -

- - - - - - -
- 🌟 -

- This week we move from 2 - dimensions to three! Maybe you - could exercise your - perspective - in CSS to create a 3D cube. Or, - you can try out creating 3D shapes - in JavaScript, using - WebGL - or building a - Three.js scene. -

-
- - - - - - -
- 🌟 -

- There's more to cubes than - just six square sides. There are - variations on the cube that could - be fun to play with this week: - cuboid shapes - are hexahedrons with faces that - aren't always squares. And if - you want to really push the - boundaries of shape, consider the - 4 dimensional - tesseract! -

-
- - - - - - -
- 🌟 -

- Here's a mind-bending idea - that can combine the round shapes - from week one with this - week's cube theme: - Spherical Cubes - 😳 Solving longstanding - mathematical mysteries is probably - outside the scope of a CodePen - challenge, but you could use - front-end tools to explore fitting - spheres into cubes, or vice-versa. -

-
- 		-

- RESOURCES! -

- - - - - - -
- 📖 -

- Learn all about - How CSS Perspective Works - and how to build a 3D CSS cube - from scratch in Amit Sheen's - in-depth tutorial for CSS-Tricks. - Or, check out stunning examples of - WebGL cubes from Matthias Hurrle: - Just Ice - and - Posing. -

-
- - - - - - -
- 📖 -

- Want to go beyond the square cube? - Draw inspiration from - EntropyReversed's - Pulsating Tesseract, Josetxu's - Rainbow Cuboid Loader, or Ana Tudor's - Pure CSS cuboid jellyfish. -

-
- - - - - - -
- 📖 -

- Did that spherical cubes concept - pique your interest? Explore Ryan - Mulligan's - Cube Sphere, Munir Safi's - 3D Sphere to Cube Animation - With Virtual Trackball - and Ana Tudor's - Infinitely unpack prism - for more mindbending cube concepts - that test the boundaries of how - shapes interact with each other. -

-
-
-
- - - - - - -
- Go to Challenge Page -
- - - - - - -
-

- You can adjust your - email preferences - any time, or - instantly opt out - of emails of this kind. Need help with anything? - Hit up - support. -

-
-
-
- - - - diff --git a/local.html b/local.html deleted file mode 100644 index 9a32a470e6..0000000000 --- a/local.html +++ /dev/null @@ -1,583 +0,0 @@ - - - - - - - - - - - - - - - - - -
-
- #CodePenChallenge: Cubes -
-  ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ -
-
- - - - - - -
- codepen -
- - - - - - -
-

- View this Challenge on CodePen -

-

- This week: #CodePenChallenge: -

- Cubes -

-

- - - - - - -
-

- The Shape challenge continues! -

-

- Last week, we kicked things off with round shapes. - We "rounded" up the Pens from week one - in our - #CodePenChallenge: Round - collection. -

-

- This week, we move on to cubes 🧊 -

-

- Creating cubes in the browser is all about mastery - of illusion. Take control of perspective and - shadows and you can make the magic of 3D on a flat - screen 🧙 -

-

- This week is a fun chance to work on your CSS - shape-building skills, or dig into a 3D JavaScript - library like Three.js. -

-

- This week's starter template features an ice - cube emoji to help inspire a "cool" idea - for your Pen. As always, the template is just as - jumping off point. Feel free to incorporate the 🧊 - in your creation, add more elements, or freeze it - out completely and start over from scratch! -

-

- 💪 Your Challenge: - create a Pen that includes cube shapes. -

- codepen - - - - - - -
- codepen -

- CodePen PRO combines a bunch of features - that can help any front-end designer or - developer at any experience level. -

- Learn More -
-
-

- To participate: - Create a Pen → - and tag it - codepenchallenge - and - cpc-cubes. We'll be watching and gathering the Pens into a - Collection, and sharing on - Twitter - and - Instagram - (Use the #CodePenChallenge tag on Twitter and Instagram as - well). -

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

- IDEAS! -

- - - - - - -
- 🌟 -

- This week we move from 2 - dimensions to three! Maybe you - could exercise your - perspective - in CSS to create a 3D - cube. Or, you can try out creating - 3D shapes in JavaScript, using - WebGL - or building a - Three.js scene. -

-
- - - - - - -
- 🌟 -

- There's more to cubes than - just six square sides. There are - variations on the cube that could - be fun to play with this week: - cuboid shapes - are hexahedrons with faces - that aren't always squares. - And if you want to really push the - boundaries of shape, consider the - 4 dimensional - tesseract! -

-
- - - - - - -
- 🌟 -

- Here's a mind-bending idea - that can combine the round shapes - from week one with this - week's cube theme: - Spherical Cubes - 😳 Solving longstanding - mathematical mysteries is probably - outside the scope of a CodePen - challenge, but you could use - front-end tools to explore fitting - spheres into cubes, or vice-versa. -

-
- 		-

- RESOURCES! -

- - - - - - -
- 📖 -

- Learn all about - How CSS Perspective Works - and how to build a 3D CSS - cube from scratch in Amit - Sheen's in-depth tutorial for - CSS-Tricks. Or, check out stunning - examples of WebGL cubes from - Matthias Hurrle: - Just Ice - and - Posing. -

-
- - - - - - -
- 📖 -

- Want to go beyond the square cube? - Draw inspiration from - EntropyReversed's - Pulsating Tesseract, Josetxu's - Rainbow Cuboid Loader, or Ana Tudor's - Pure CSS cuboid jellyfish. -

-
- - - - - - -
- 📖 -

- Did that spherical cubes concept - pique your interest? Explore Ryan - Mulligan's - Cube Sphere, Munir Safi's - 3D Sphere to Cube Animation - With Virtual Trackball - and Ana Tudor's - Infinitely unpack prism - for more mindbending cube - concepts that test the boundaries - of how shapes interact with each - other. -

-
-
-
- - - - - - -
- Go to Challenge Page -
- - - - - - -
-

- You can adjust your - email preferences - any time, or - instantly opt out - of emails of this kind. Need help with - anything? Hit up - support. -

-
-
-
- - - -