Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
  <div class="card green">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" text-rendering="geometricPrecision" shape-rendering="geometricPrecision" style="white-space: pre;">
    <style>
@keyframes Purple\ 3_t { 0% { transform: translate(107.1644px,654.899px); } 100% { transform: translate(109.100107px,455.899px); } }
@keyframes Purple\ 2_t { 0% { transform: translate(105.1644px,450.634px); } 100% { transform: translate(107.100107px,251.634px); } }
@keyframes Purple\ 1_t { 0% { transform: translate(114.9354px,230.082px); } 100% { transform: translate(116.871107px,31.082px); } }
@keyframes Blue\ 3_t { 0% { transform: translate(225.1499px,604.1591px); } 100% { transform: translate(227.085607px,405.1591px); } }
@keyframes Blue\ 2_t { 0% { transform: translate(223.1499px,389.6416px); } 100% { transform: translate(225.085607px,190.6416px); } }
@keyframes Blue\ 1_t { 0% { transform: translate(222.8596px,182.0929px); } 100% { transform: translate(224.795307px,-16.9071px); } }
@keyframes Input\ text_t { 0% { transform: translate(105.522px,309.439px) scale(0.003213,1) translateY(-6px); } 100% { transform: translate(105.522px,309.439px) scale(2.119029,0.992742) translateY(-6px); } }
    </style>
    <g id="chat scroll-content" transform="translate(131.564,183.226) translate(-244.5,-320.438)">
        <image id="Circle" width="282" height="269.096" xlink:href="data:image/png;base64,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" transform="translate(211.126,112.668) translate(-140.19,-37.6675)" style="mix-blend-mode: normal;"/>
        <g id="Purple 3" opacity="1" transform="translate(151.455,711.731) translate(-44.2906,-56.832)" style="animation: Purple\ 3_t 2s linear infinite both;">
            <rect width="200" height="90" stroke="none" fill="#9775fa" stroke-linejoin="round" stroke-width="18" rx="2" transform="translate(-60.6641,14.6364) translate(-44.5,-6.25)"/>
            <path d="M0,0L8.18182,15L15,0" stroke="none" fill="#9775fa" stroke-linecap="square" transform="translate(12.4405,96.0674)"/>
            <rect id="Text line bottom" width="103.09" height="15" fill="#e5dbff" stroke-linecap="square" rx="2" stroke="none" transform="translate(-42.1641,79.6364) translate(-43.5,-11.25)"/>
            <rect id="Text line middle" width="161" height="15" fill="#e5dbff" stroke-linecap="square" rx="2" stroke="none" transform="translate(-42.1641,46.1364) translate(-43.5,-0.25)"/>
            <rect id="Text line top" width="161" height="15" fill="#e5dbff" stroke-linecap="square" rx="2" stroke="none" transform="translate(-42.1641,28.3864) translate(-43.5,-5)"/>
        </g>
        <g id="Purple 2" opacity="1" transform="translate(149.455,507.466) translate(-44.2906,-56.832)" style="animation: Purple\ 2_t 2s linear infinite both;">
            <rect width="200" height="90" stroke="none" fill="#9775fa" stroke-linejoin="round" stroke-width="18" rx="2" transform="translate(-58.6641,10.952) translate(-44.5,-6.25)"/>
            <path d="M0,0L8.18182,15L15,0" stroke="none" fill="#9775fa" stroke-linecap="square" transform="translate(11.7587,93.6502)"/>
            <rect id="Text line bottom" width="103.094" height="15" fill="#e5dbff" stroke-linecap="square" rx="2" stroke="none" transform="translate(-39.6537,75.952) translate(-43.5,-11.25)"/>
            <rect id="Text line middle" width="161" height="15" fill="#e5dbff" stroke-linecap="square" rx="2" stroke="none" transform="translate(-39.6537,42.452) translate(-43.5,-0.25)"/>
            <rect id="Text line top" width="161" height="15" fill="#e5dbff" stroke-linecap="square" rx="2" stroke="none" transform="translate(-39.6537,24.702) translate(-43.5,-5)"/>
        </g>
        <g id="Purple 1" opacity="1" transform="translate(159.226,286.914) translate(-44.2906,-56.832)" style="animation: Purple\ 1_t 2s linear infinite both;">
            <rect width="200" height="90" stroke="none" fill="#9775fa" stroke-linejoin="round" stroke-width="18" rx="2" transform="translate(-66.4351,16.3864) translate(-44.5,-6.25)"/>
            <path d="M0,0L8.18182,15L15,0" stroke="none" fill="#9775fa" stroke-linecap="square" transform="translate(3.52683,99.6847)"/>
            <rect id="Text line top" width="161" height="15" fill="#e5dbff" stroke-linecap="square" rx="2" stroke="none" transform="translate(-47.9351,30.1364) translate(-43.5,-5)"/>
            <rect id="Text line middle" width="161" height="15" fill="#e5dbff" stroke-linecap="square" rx="2" stroke="none" transform="translate(-47.9351,47.8864) translate(-43.5,-0.25)"/>
            <rect id="Text line bottom" width="103.726" height="15" fill="#e5dbff" stroke-linecap="square" rx="2" stroke="none" transform="translate(-47.9351,81.3864) translate(-43.5,-11.25)"/>
        </g>
        <g id="Blue 3" opacity="1" transform="translate(272.161,648.736) translate(-47.0112,-44.5769)" style="animation: Blue\ 3_t 2s linear infinite both;">
            <rect width="200" height="90" stroke="none" fill="#1878c7" stroke-linejoin="miter" stroke-width="18" stroke-linecap="butt" fill-rule="nonzero" stroke-miterlimit="2" rx="2" transform="translate(25.6404,-38.6249) translate(-44.5,-6.25)"/>
            <path d="M0,0L8.18182,15L15,0" stroke="none" fill="#1878c7" stroke-linecap="square" transform="translate(56.8222,44.1263)"/>
            <rect id="Text line bottom" width="99.7102" height="15" fill="#bae0ff" stroke-linecap="square" rx="2" stroke="none" transform="translate(44.4945,26.3751) translate(-43.5,-11.25)"/>
            <rect id="Text line middle" width="161" height="15" fill="#bae0ff" stroke-linecap="square" rx="2" stroke="none" transform="translate(44.4945,-7.12491) translate(-43.5,-0.25)"/>
            <rect id="Text line top" width="161" height="15" fill="#bae0ff" stroke-linecap="square" rx="2" stroke="none" transform="translate(44.4945,-24.8749) translate(-43.5,-5)"/>
        </g>
        <g id="Blue 2" opacity="1" transform="translate(270.161,434.219) translate(-47.0112,-44.5769)" style="animation: Blue\ 2_t 2s linear infinite both;">
            <rect width="200" height="90" stroke="none" fill="#1878c7" stroke-linejoin="miter" stroke-width="18" stroke-linecap="butt" fill-rule="nonzero" stroke-miterlimit="2" rx="2" transform="translate(25.6404,-38.6249) translate(-44.5,-6.25)"/>
            <path d="M0,0L8.18182,15L15,0" stroke="none" fill="#1878c7" stroke-linecap="square" transform="translate(56.8222,44.1251)"/>
            <rect id="Text line bottom" width="104.71" height="15" fill="#bae0ff" stroke-linecap="square" rx="2" stroke="none" transform="translate(44.1404,26.3751) translate(-43.5,-11.25)"/>
            <rect id="Text line middle" width="161" height="15" fill="#bae0ff" stroke-linecap="square" rx="2" stroke="none" transform="translate(44.1404,-7.12491) translate(-43.5,-0.25)"/>
            <rect id="Text line top" width="161" height="15" fill="#bae0ff" stroke-linecap="square" rx="2" stroke="none" transform="translate(44.1404,-24.8749) translate(-43.5,-5)"/>
        </g>
        <g id="Blue 1" opacity="1" transform="translate(309,189.718) translate(-86.1404,-7.6251)" style="animation: Blue\ 1_t 2s linear infinite both;">
            <rect width="200" height="90" stroke="none" fill="#1878c7" stroke-linejoin="miter" stroke-width="18" stroke-linecap="butt" fill-rule="nonzero" stroke-miterlimit="2" rx="2" transform="translate(25.6404,-38.6249) translate(-44.5,-6.25)"/>
            <path d="M0,0L8.18182,15L15,0" stroke="none" fill="#1878c7" stroke-linecap="square" transform="translate(56.8222,44.1251)"/>
            <rect id="Text line bottom" width="109" height="15" fill="#bae0ff" stroke-linecap="square" rx="2" stroke="none" transform="translate(44.1404,26.3751) translate(-43.5,-11.25)"/>
            <rect id="Text line middle" width="161" height="15" fill="#bae0ff" stroke-linecap="square" rx="2" stroke="none" transform="translate(44.1404,-7.12491) translate(-43.5,-0.25)"/>
            <rect id="Text line top" width="161" height="15" fill="#bae0ff" stroke-linecap="square" rx="2" stroke="none" transform="translate(44.1404,-24.8749) translate(-43.5,-5)"/>
        </g>
        <g id="Input" transform="translate(232.447,308.81) translate(-244.5,-29.0002)">
            <rect width="489" height="55.8456" stroke="none" fill="#f8f9fa" stroke-linecap="square" rx="4" ry="4" transform="translate(244.5,27.9232) translate(-244.5,-27.9228)"/>
            <rect width="489" height="10" stroke="#228ae6" fill="#228ae6" stroke-linecap="square" rx="0" ry="0" transform="translate(244.5,7.5) translate(-244.5,-7.5)"/>
            <rect width="489" height="10" stroke="#228ae6" fill="#228ae6" stroke-linecap="square" rx="0" ry="0" transform="translate(244.5,55.5004) translate(-244.5,-7.5)"/>
        </g>
        <rect id="Input text" width="95.5503" height="12" opacity="0.976655" stroke="#070707" fill="#070707" stroke-linecap="square" rx="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-width="1" ry="4" transform="translate(105.522,309.439) scale(0.003213,1) translate(0,-6)" style="animation: Input\ text_t 1s linear infinite both;"/>
    </g>
</svg>
    <h2>What is messages?</h2>
    <p>Send a message to a business prospect, or a friend all in a unified experience from your business DID.
    </p>
    <div class="footer">
      <div class="button">
      Next
      </div>
  </div>
 </div>
  
  <div class="card lightblue">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="skipped onboarding" width="200" height="200" viewBox="0 0 200 200" text-rendering="geometricPrecision" shape-rendering="geometricPrecision" style="white-space: pre;">
    <style>
@keyframes hover\ third\ line_f { 0% { fill: #f8f9fa; } 80.6452% { fill: #f8f9fa; } 83.871% { fill: #bae0ff; } 93.5484% { fill: #bae0ff; } 96.7742% { fill: #74bffc; } 100% { fill: #bae0ff; } }
@keyframes hover\ second\ line_f { 0% { fill: #f8f9fa; } 35.4839% { fill: #f8f9fa; } 38.7097% { fill: #bae0ff; } 77.4194% { fill: #bae0ff; } 80.6452% { fill: #f8f9fa; } 100% { fill: #f8f9fa; } }
@keyframes hover\ first\ line_f { 0% { fill: #bae0ff; } 32.2581% { fill: #bae0ff; } 35.4839% { fill: #f8f9fa; } 100% { fill: #f8f9fa; } }
@keyframes cursor_mo { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
    </style>
    <g id="skipped onboarding-content" transform="translate(-11.6009,153) translate(-210.601,-165.5)">
        <rect id="background" width="334.5" height="190.5" fill="#e9ecef" stroke-linecap="square" ry="0" stroke="none" transform="translate(253.952,173.75) translate(-167.25,-116.75)"/>
        <rect id="menu dropdown" width="251" height="183" fill="#f8f9fa" stroke-linecap="square" ry="4" stroke="#f1f3f5" rx="4" transform="translate(283.202,156) translate(-125.5,-91.5)"/>
        <rect id="hover third line" width="295.5" height="48" fill="#f8f9fa" stroke="none" transform="translate(208.202,199.094) translate(-109,-32.5944)" style="animation: hover\ third\ line_f 3.1s linear infinite both;"/>
        <rect id="hover second line" width="295.5" height="48" fill="#f8f9fa" stroke="none" transform="translate(208.202,151.094) translate(-109,-32.5944)" style="animation: hover\ second\ line_f 3.1s linear infinite both;"/>
        <rect id="hover first line" width="295.5" height="48" fill="#bae0ff" stroke="none" transform="translate(208.202,103.094) translate(-109,-32.5944)" style="animation: hover\ first\ line_f 3.1s linear infinite both;"/>
        <g id="Text block" transform="translate(192.5,197.907) translate(-180,-111)">
            <rect width="279.798" height="12" fill="#868e96" stroke="none" rx="4" ry="4" transform="translate(188.5,105.578) translate(-101.798,-7.9852)"/>
            <rect width="279.798" height="12" fill="#868e96" stroke="none" rx="4" ry="4" transform="translate(188.5,57.5781) translate(-101.798,-7.9852)"/>
            <rect width="277.798" height="12" fill="#868e96" stroke="none" rx="4" ry="4" transform="translate(186.5,8.59311) translate(-99.7982,-7.9852)"/>
        </g>
        <g id="menu " transform="translate(328.202,30.2651) translate(-90,-28.2651)">
            <rect width="180" height="56" stroke="none" fill="#00213c" stroke-linecap="square" rx="0" ry="0" transform="translate(92.25,29.2651) translate(-88.25,-30.2651)"/>
            <rect width="174" height="56" stroke="none" fill="#005496" stroke-linecap="square" rx="0" ry="0" transform="translate(-58.75,29.2651) translate(-92.75,-30.2651)"/>
            <g id="status" transform="translate(90.0669,28.2651) translate(-46.75,-7.5)">
                <ellipse rx="7.5" ry="7.5" fill="#2f9e44" stroke-linecap="square" stroke="none" transform="translate(7.5,7.5)"/>
                <rect width="92" height="12" fill="#f8f9fa" stroke-linecap="square" ry="4" stroke="none" rx="4" transform="translate(58.25,7.5) translate(-35.25,-5.61745)"/>
            </g>
        </g>
        <path id="cursor" stroke="none" fill="rgb(41, 45, 47)" d="M110.06,164.25C110.58,164.05,110.62,163.68,110.12,163.4L90.88,152.5C90.39,152.22,90.11,152.43,90.25,152.97L95.87,174.91C96.01,175.45,96.37,175.5,96.67,175.04L100.71,168.76L106.2,176L108.68,174L103.19,166.76ZM110.06,164.25" style="animation: cursor_mo 3.1s linear infinite both; offset-path: path('M281.858,-63.8838C280.627,-62.9749,239.252,12.2038,211.841,35.7651'); offset-rotate: 0deg;"/>
    </g>
    <ellipse rx="100" ry="100" fill="none" stroke="#fd300c" stroke-width="1" display="none" transform="translate(100,101)"/>
</svg>

    <h2>Onboarding?</h2>
    <p>Skipped the onboarding? You can  access the onboarding screens again, the help menu, or contact support.</p>
     <div class="footer">
    <div class="button">
    Previous
    </div>
  </div>
  </div>
</div>

              
            
!

CSS

              
                body {
  align-items: center;
  display: flex;
  font-family: Verdana;
  height: 100vh;
  justify-content: center;
  width: 100%;
}
.container {
  background-color: #212529;
  display: flex;
  height: 500px;
  justify-content: space-between;
  padding: 40px;
  min-width: 700px;
}

.card {
  align-items: center;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 460px;
  padding-top: 56px;
  margin: 24px;
  max-width: 300px;
}

.green {
  background-color: #2B8A3E;
}

.lightblue {
  background-color: #3BC9DB;
}

.card h2 {
  color: #F8F9FA;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}

.card p {
  color: #F8F9FA;
  font-size: 12px;
  line-height: 16px;
  margin: 0;
  padding: 26px;
  padding-top: 0;
  text-align: center;
}

.footer {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.lightblue .footer {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.button {
  border: 1px solid #40C057;
  border-radius: 2px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  text-align: center;
  margin-right: 24px;
  padding: 8px;
  padding-right: 0;
  padding-left: 0;
  width: 100px;
}

.button:hover {
  background-color: #40C057;
  color: #2B8A3E;
  cursor: pointer;
}

.lightblue p {
  color: #F8F9FA;
}

.lightblue .button {
  border: 1px solid #66D9E8;
  margin-left: 24px;
}

.lightblue .button:hover {
  color: #15AABF;
  cursor: pointer;
  background-color: #66D9E8;
}

svg { 
  border-radius: 100%;
  width: 200px;
}
              
            
!

JS

              
                
              
            
!
999px

Console