refrakt.md

Docs Runes Plan Blog Changelog

Juxtapose

Interactive content comparison. A --- separator splits content into two panels. Four interaction modes let readers compare content with a draggable slider, A/B toggle, crossfade, or scroll-triggered animation. Use the labels attribute to add overlay labels to each panel.

Basic usage

Content before --- becomes the first panel, content after becomes the second. The default slider variant adds a draggable divider between the two panels.

{% juxtapose %}

![Oak tree summer](https://assets.refrakt.md/oak-tree-summer.png)

---

![Oak tree winter](https://assets.refrakt.md/oak-tree-winter.png)

{% /juxtapose %}
<section data-rune="juxtapose">
  <meta content="slider" data-field="variant">
  <meta content="vertical" data-field="orientation">
  <meta content="50" data-field="position">
  <meta content="1000" data-field="duration">
  <div data-name="panels">
    <div data-field="panel" data-rune="juxtapose-panel">
      <div data-name="body">
        <img src="https://assets.refrakt.md/oak-tree-summer.png" alt="Oak tree summer">
      </div>
    </div>
    <div data-field="panel" data-rune="juxtapose-panel">
      <div data-name="body">
        <img src="https://assets.refrakt.md/oak-tree-winter.png" alt="Oak tree winter">
      </div>
    </div>
  </div>
</section>
Oak tree summer
Oak tree winter
<section class="rf-juxtapose rf-juxtapose--slider" data-variant="slider" data-orientation="vertical" data-position="50" data-duration="1000" data-rune="juxtapose" data-density="compact" style="--jx-position: 50; --jx-duration: 1000">
  <div data-name="panels" class="rf-juxtapose__panels">
    <div data-field="panel" class="rf-juxtapose-panel" data-rune="juxtapose-panel" data-density="full" data-state="inactive">
      <div data-name="body" class="rf-juxtapose-panel__body">
        <img src="https://assets.refrakt.md/oak-tree-summer.png" alt="Oak tree summer" />
      </div>
    </div>
    <div data-field="panel" class="rf-juxtapose-panel" data-rune="juxtapose-panel" data-density="full" data-state="inactive">
      <div data-name="body" class="rf-juxtapose-panel__body">
        <img src="https://assets.refrakt.md/oak-tree-winter.png" alt="Oak tree winter" />
      </div>
    </div>
  </div>
</section>

With sandbox

Panels are not restricted to images. Put two sandboxes with light and dark modes to showcase a component design

{% juxtapose %}

{% sandbox src="profile-card" framework="tailwind" tint-mode="light" %}{% /sandbox %}

---

{% sandbox src="profile-card" framework="tailwind" tint-mode="dark" %}{% /sandbox %}

{% /juxtapose %}
<section data-rune="juxtapose">
  <meta content="slider" data-field="variant">
  <meta content="vertical" data-field="orientation">
  <meta content="50" data-field="position">
  <meta content="1000" data-field="duration">
  <div data-name="panels">
    <div data-field="panel" data-rune="juxtapose-panel">
      <div data-name="body">
        <div data-rune="sandbox">
          <meta content="&lt;div data-source=&quot;HTML&quot;&gt;
&lt;div class=&quot;min-h-screen bg-[#faf5eb] dark:bg-[#152238] flex items-center justify-center p-6&quot;&gt;
  &lt;div class=&quot;bg-[#fffbf2] dark:bg-[#1a2940] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors&quot;&gt;
    &lt;!-- Cover Image --&gt;
    &lt;div class=&quot;h-32 bg-gradient-to-r from-[#457b9d] to-[#a8dadc]&quot;&gt;&lt;/div&gt;

    &lt;!-- Profile Content --&gt;
    &lt;div class=&quot;relative px-6 pb-6&quot;&gt;
      &lt;!-- Avatar --&gt;
      &lt;div class=&quot;flex justify-center -mt-16 mb-4&quot;&gt;
        &lt;img
          src=&quot;https://i.pravatar.cc/120?img=32&quot;
          alt=&quot;Profile&quot;
          class=&quot;w-32 h-32 rounded-full border-4 border-[#fffbf2] dark:border-[#1a2940] shadow-lg&quot;
        /&gt;
      &lt;/div&gt;

      &lt;!-- User Info --&gt;
      &lt;div class=&quot;text-center mb-6&quot;&gt;
        &lt;h2 class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee] mb-1&quot;&gt;Sarah Johnson&lt;/h2&gt;
        &lt;p class=&quot;text-[#5a7a90] dark:text-[#a8dadc] text-sm mb-3&quot;&gt;@sarahjohnson&lt;/p&gt;
        &lt;p class=&quot;text-[#1d3557]/80 dark:text-[#f1faee]/80 leading-relaxed&quot;&gt;
          Product designer passionate about crafting delightful user experiences.
          Coffee enthusiast ☕️
        &lt;/p&gt;
      &lt;/div&gt;

      &lt;!-- Stats --&gt;
      &lt;div class=&quot;flex justify-around py-4 border-y border-[#d8e4de] dark:border-white/10 mb-6&quot;&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;1.2k&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Followers&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;842&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Following&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;94&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Posts&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!-- Action Buttons --&gt;
      &lt;div class=&quot;flex gap-3&quot;&gt;
        &lt;button class=&quot;flex-1 bg-gradient-to-r from-[#457b9d] to-[#376585] text-white font-semibold py-3 rounded-xl hover:from-[#376585] hover:to-[#1d3557] transition-all shadow-lg shadow-[#457b9d]/30 dark:shadow-[#457b9d]/20&quot;&gt;
          Follow
        &lt;/button&gt;
        &lt;button class=&quot;flex-1 border-2 border-[#d8e4de] dark:border-[#263850] text-[#1d3557] dark:text-[#f1faee] font-semibold py-3 rounded-xl hover:bg-[#fdf0d5] dark:hover:bg-[#203048] transition-all&quot;&gt;
          Message
        &lt;/button&gt;
      &lt;/div&gt;

      &lt;!-- Social Links --&gt;
      &lt;div class=&quot;flex justify-center gap-4 mt-6&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;" data-field="content">
          <meta content="tailwind" data-field="framework">
          <meta content="" data-field="dependencies">
          <meta content="auto" data-field="height">
          <meta content="default" data-field="context">
          <pre data-language="html">
            <code data-language="html">&lt;div data-source=&quot;HTML&quot;&gt;
&lt;div class=&quot;min-h-screen bg-[#faf5eb] dark:bg-[#152238] flex items-center justify-center p-6&quot;&gt;
  &lt;div class=&quot;bg-[#fffbf2] dark:bg-[#1a2940] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors&quot;&gt;
    &lt;!-- Cover Image --&gt;
    &lt;div class=&quot;h-32 bg-gradient-to-r from-[#457b9d] to-[#a8dadc]&quot;&gt;&lt;/div&gt;

    &lt;!-- Profile Content --&gt;
    &lt;div class=&quot;relative px-6 pb-6&quot;&gt;
      &lt;!-- Avatar --&gt;
      &lt;div class=&quot;flex justify-center -mt-16 mb-4&quot;&gt;
        &lt;img
          src=&quot;https://i.pravatar.cc/120?img=32&quot;
          alt=&quot;Profile&quot;
          class=&quot;w-32 h-32 rounded-full border-4 border-[#fffbf2] dark:border-[#1a2940] shadow-lg&quot;
        /&gt;
      &lt;/div&gt;

      &lt;!-- User Info --&gt;
      &lt;div class=&quot;text-center mb-6&quot;&gt;
        &lt;h2 class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee] mb-1&quot;&gt;Sarah Johnson&lt;/h2&gt;
        &lt;p class=&quot;text-[#5a7a90] dark:text-[#a8dadc] text-sm mb-3&quot;&gt;@sarahjohnson&lt;/p&gt;
        &lt;p class=&quot;text-[#1d3557]/80 dark:text-[#f1faee]/80 leading-relaxed&quot;&gt;
          Product designer passionate about crafting delightful user experiences.
          Coffee enthusiast ☕️
        &lt;/p&gt;
      &lt;/div&gt;

      &lt;!-- Stats --&gt;
      &lt;div class=&quot;flex justify-around py-4 border-y border-[#d8e4de] dark:border-white/10 mb-6&quot;&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;1.2k&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Followers&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;842&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Following&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;94&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Posts&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!-- Action Buttons --&gt;
      &lt;div class=&quot;flex gap-3&quot;&gt;
        &lt;button class=&quot;flex-1 bg-gradient-to-r from-[#457b9d] to-[#376585] text-white font-semibold py-3 rounded-xl hover:from-[#376585] hover:to-[#1d3557] transition-all shadow-lg shadow-[#457b9d]/30 dark:shadow-[#457b9d]/20&quot;&gt;
          Follow
        &lt;/button&gt;
        &lt;button class=&quot;flex-1 border-2 border-[#d8e4de] dark:border-[#263850] text-[#1d3557] dark:text-[#f1faee] font-semibold py-3 rounded-xl hover:bg-[#fdf0d5] dark:hover:bg-[#203048] transition-all&quot;&gt;
          Message
        &lt;/button&gt;
      &lt;/div&gt;

      &lt;!-- Social Links --&gt;
      &lt;div class=&quot;flex justify-center gap-4 mt-6&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;</code>
          </pre>
          <meta data-field="source-panel" data-label="HTML" data-origin="profile-card/index.html">
          <meta data-field="tint-mode" content="light">
        </div>
      </div>
    </div>
    <div data-field="panel" data-rune="juxtapose-panel">
      <div data-name="body">
        <div data-rune="sandbox">
          <meta content="&lt;div data-source=&quot;HTML&quot;&gt;
&lt;div class=&quot;min-h-screen bg-[#faf5eb] dark:bg-[#152238] flex items-center justify-center p-6&quot;&gt;
  &lt;div class=&quot;bg-[#fffbf2] dark:bg-[#1a2940] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors&quot;&gt;
    &lt;!-- Cover Image --&gt;
    &lt;div class=&quot;h-32 bg-gradient-to-r from-[#457b9d] to-[#a8dadc]&quot;&gt;&lt;/div&gt;

    &lt;!-- Profile Content --&gt;
    &lt;div class=&quot;relative px-6 pb-6&quot;&gt;
      &lt;!-- Avatar --&gt;
      &lt;div class=&quot;flex justify-center -mt-16 mb-4&quot;&gt;
        &lt;img
          src=&quot;https://i.pravatar.cc/120?img=32&quot;
          alt=&quot;Profile&quot;
          class=&quot;w-32 h-32 rounded-full border-4 border-[#fffbf2] dark:border-[#1a2940] shadow-lg&quot;
        /&gt;
      &lt;/div&gt;

      &lt;!-- User Info --&gt;
      &lt;div class=&quot;text-center mb-6&quot;&gt;
        &lt;h2 class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee] mb-1&quot;&gt;Sarah Johnson&lt;/h2&gt;
        &lt;p class=&quot;text-[#5a7a90] dark:text-[#a8dadc] text-sm mb-3&quot;&gt;@sarahjohnson&lt;/p&gt;
        &lt;p class=&quot;text-[#1d3557]/80 dark:text-[#f1faee]/80 leading-relaxed&quot;&gt;
          Product designer passionate about crafting delightful user experiences.
          Coffee enthusiast ☕️
        &lt;/p&gt;
      &lt;/div&gt;

      &lt;!-- Stats --&gt;
      &lt;div class=&quot;flex justify-around py-4 border-y border-[#d8e4de] dark:border-white/10 mb-6&quot;&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;1.2k&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Followers&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;842&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Following&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;94&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Posts&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!-- Action Buttons --&gt;
      &lt;div class=&quot;flex gap-3&quot;&gt;
        &lt;button class=&quot;flex-1 bg-gradient-to-r from-[#457b9d] to-[#376585] text-white font-semibold py-3 rounded-xl hover:from-[#376585] hover:to-[#1d3557] transition-all shadow-lg shadow-[#457b9d]/30 dark:shadow-[#457b9d]/20&quot;&gt;
          Follow
        &lt;/button&gt;
        &lt;button class=&quot;flex-1 border-2 border-[#d8e4de] dark:border-[#263850] text-[#1d3557] dark:text-[#f1faee] font-semibold py-3 rounded-xl hover:bg-[#fdf0d5] dark:hover:bg-[#203048] transition-all&quot;&gt;
          Message
        &lt;/button&gt;
      &lt;/div&gt;

      &lt;!-- Social Links --&gt;
      &lt;div class=&quot;flex justify-center gap-4 mt-6&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;" data-field="content">
          <meta content="tailwind" data-field="framework">
          <meta content="" data-field="dependencies">
          <meta content="auto" data-field="height">
          <meta content="default" data-field="context">
          <pre data-language="html">
            <code data-language="html">&lt;div data-source=&quot;HTML&quot;&gt;
&lt;div class=&quot;min-h-screen bg-[#faf5eb] dark:bg-[#152238] flex items-center justify-center p-6&quot;&gt;
  &lt;div class=&quot;bg-[#fffbf2] dark:bg-[#1a2940] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors&quot;&gt;
    &lt;!-- Cover Image --&gt;
    &lt;div class=&quot;h-32 bg-gradient-to-r from-[#457b9d] to-[#a8dadc]&quot;&gt;&lt;/div&gt;

    &lt;!-- Profile Content --&gt;
    &lt;div class=&quot;relative px-6 pb-6&quot;&gt;
      &lt;!-- Avatar --&gt;
      &lt;div class=&quot;flex justify-center -mt-16 mb-4&quot;&gt;
        &lt;img
          src=&quot;https://i.pravatar.cc/120?img=32&quot;
          alt=&quot;Profile&quot;
          class=&quot;w-32 h-32 rounded-full border-4 border-[#fffbf2] dark:border-[#1a2940] shadow-lg&quot;
        /&gt;
      &lt;/div&gt;

      &lt;!-- User Info --&gt;
      &lt;div class=&quot;text-center mb-6&quot;&gt;
        &lt;h2 class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee] mb-1&quot;&gt;Sarah Johnson&lt;/h2&gt;
        &lt;p class=&quot;text-[#5a7a90] dark:text-[#a8dadc] text-sm mb-3&quot;&gt;@sarahjohnson&lt;/p&gt;
        &lt;p class=&quot;text-[#1d3557]/80 dark:text-[#f1faee]/80 leading-relaxed&quot;&gt;
          Product designer passionate about crafting delightful user experiences.
          Coffee enthusiast ☕️
        &lt;/p&gt;
      &lt;/div&gt;

      &lt;!-- Stats --&gt;
      &lt;div class=&quot;flex justify-around py-4 border-y border-[#d8e4de] dark:border-white/10 mb-6&quot;&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;1.2k&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Followers&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;842&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Following&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;94&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Posts&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!-- Action Buttons --&gt;
      &lt;div class=&quot;flex gap-3&quot;&gt;
        &lt;button class=&quot;flex-1 bg-gradient-to-r from-[#457b9d] to-[#376585] text-white font-semibold py-3 rounded-xl hover:from-[#376585] hover:to-[#1d3557] transition-all shadow-lg shadow-[#457b9d]/30 dark:shadow-[#457b9d]/20&quot;&gt;
          Follow
        &lt;/button&gt;
        &lt;button class=&quot;flex-1 border-2 border-[#d8e4de] dark:border-[#263850] text-[#1d3557] dark:text-[#f1faee] font-semibold py-3 rounded-xl hover:bg-[#fdf0d5] dark:hover:bg-[#203048] transition-all&quot;&gt;
          Message
        &lt;/button&gt;
      &lt;/div&gt;

      &lt;!-- Social Links --&gt;
      &lt;div class=&quot;flex justify-center gap-4 mt-6&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;</code>
          </pre>
          <meta data-field="source-panel" data-label="HTML" data-origin="profile-card/index.html">
          <meta data-field="tint-mode" content="dark">
        </div>
      </div>
    </div>
  </div>
</section>
<section class="rf-juxtapose rf-juxtapose--slider" data-variant="slider" data-orientation="vertical" data-position="50" data-duration="1000" data-rune="juxtapose" data-density="compact" style="--jx-position: 50; --jx-duration: 1000">
  <div data-name="panels" class="rf-juxtapose__panels">
    <div data-field="panel" class="rf-juxtapose-panel" data-rune="juxtapose-panel" data-density="full" data-state="inactive">
      <div data-name="body" class="rf-juxtapose-panel__body">
        <rf-sandbox class="rf-sandbox" data-color-scheme="light" data-rune="sandbox" data-density="compact" data-source-content="&lt;div data-source=&quot;HTML&quot;&gt;
&lt;div class=&quot;min-h-screen bg-[#faf5eb] dark:bg-[#152238] flex items-center justify-center p-6&quot;&gt;
  &lt;div class=&quot;bg-[#fffbf2] dark:bg-[#1a2940] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors&quot;&gt;
    &lt;!-- Cover Image --&gt;
    &lt;div class=&quot;h-32 bg-gradient-to-r from-[#457b9d] to-[#a8dadc]&quot;&gt;&lt;/div&gt;

    &lt;!-- Profile Content --&gt;
    &lt;div class=&quot;relative px-6 pb-6&quot;&gt;
      &lt;!-- Avatar --&gt;
      &lt;div class=&quot;flex justify-center -mt-16 mb-4&quot;&gt;
        &lt;img
          src=&quot;https://i.pravatar.cc/120?img=32&quot;
          alt=&quot;Profile&quot;
          class=&quot;w-32 h-32 rounded-full border-4 border-[#fffbf2] dark:border-[#1a2940] shadow-lg&quot;
        /&gt;
      &lt;/div&gt;

      &lt;!-- User Info --&gt;
      &lt;div class=&quot;text-center mb-6&quot;&gt;
        &lt;h2 class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee] mb-1&quot;&gt;Sarah Johnson&lt;/h2&gt;
        &lt;p class=&quot;text-[#5a7a90] dark:text-[#a8dadc] text-sm mb-3&quot;&gt;@sarahjohnson&lt;/p&gt;
        &lt;p class=&quot;text-[#1d3557]/80 dark:text-[#f1faee]/80 leading-relaxed&quot;&gt;
          Product designer passionate about crafting delightful user experiences.
          Coffee enthusiast ☕️
        &lt;/p&gt;
      &lt;/div&gt;

      &lt;!-- Stats --&gt;
      &lt;div class=&quot;flex justify-around py-4 border-y border-[#d8e4de] dark:border-white/10 mb-6&quot;&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;1.2k&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Followers&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;842&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Following&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;94&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Posts&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!-- Action Buttons --&gt;
      &lt;div class=&quot;flex gap-3&quot;&gt;
        &lt;button class=&quot;flex-1 bg-gradient-to-r from-[#457b9d] to-[#376585] text-white font-semibold py-3 rounded-xl hover:from-[#376585] hover:to-[#1d3557] transition-all shadow-lg shadow-[#457b9d]/30 dark:shadow-[#457b9d]/20&quot;&gt;
          Follow
        &lt;/button&gt;
        &lt;button class=&quot;flex-1 border-2 border-[#d8e4de] dark:border-[#263850] text-[#1d3557] dark:text-[#f1faee] font-semibold py-3 rounded-xl hover:bg-[#fdf0d5] dark:hover:bg-[#203048] transition-all&quot;&gt;
          Message
        &lt;/button&gt;
      &lt;/div&gt;

      &lt;!-- Social Links --&gt;
      &lt;div class=&quot;flex justify-center gap-4 mt-6&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;" data-framework="tailwind" data-height="auto" data-design-tokens="{&quot;fonts&quot;:[{&quot;role&quot;:&quot;heading&quot;,&quot;family&quot;:&quot;Inter&quot;,&quot;weights&quot;:[400,600,700],&quot;category&quot;:&quot;sans-serif&quot;},{&quot;role&quot;:&quot;body&quot;,&quot;family&quot;:&quot;Source Sans Pro&quot;,&quot;weights&quot;:[400,600],&quot;category&quot;:&quot;sans-serif&quot;},{&quot;role&quot;:&quot;mono&quot;,&quot;family&quot;:&quot;Fira Code&quot;,&quot;weights&quot;:[400],&quot;category&quot;:&quot;monospace&quot;}],&quot;colors&quot;:[{&quot;name&quot;:&quot;Primary&quot;,&quot;value&quot;:&quot;#2563EB&quot;,&quot;group&quot;:&quot;Brand&quot;},{&quot;name&quot;:&quot;Secondary&quot;,&quot;value&quot;:&quot;#7C3AED&quot;,&quot;group&quot;:&quot;Brand&quot;},{&quot;name&quot;:&quot;Accent&quot;,&quot;value&quot;:&quot;#F59E0B&quot;,&quot;group&quot;:&quot;Brand&quot;},{&quot;name&quot;:&quot;Gray&quot;,&quot;value&quot;:&quot;#F9FAFB&quot;,&quot;group&quot;:&quot;Neutral&quot;},{&quot;name&quot;:&quot;Gray&quot;,&quot;value&quot;:&quot;#E5E7EB&quot;,&quot;group&quot;:&quot;Neutral&quot;},{&quot;name&quot;:&quot;Gray&quot;,&quot;value&quot;:&quot;#9CA3AF&quot;,&quot;group&quot;:&quot;Neutral&quot;},{&quot;name&quot;:&quot;Gray&quot;,&quot;value&quot;:&quot;#374151&quot;,&quot;group&quot;:&quot;Neutral&quot;},{&quot;name&quot;:&quot;Gray&quot;,&quot;value&quot;:&quot;#111827&quot;,&quot;group&quot;:&quot;Neutral&quot;}],&quot;spacing&quot;:{&quot;unit&quot;:&quot;4px&quot;,&quot;scale&quot;:[&quot;4&quot;,&quot;8&quot;,&quot;12&quot;,&quot;16&quot;,&quot;24&quot;,&quot;32&quot;,&quot;48&quot;,&quot;64&quot;]},&quot;radii&quot;:[{&quot;name&quot;:&quot;sm&quot;,&quot;value&quot;:&quot;4px&quot;},{&quot;name&quot;:&quot;md&quot;,&quot;value&quot;:&quot;8px&quot;},{&quot;name&quot;:&quot;lg&quot;,&quot;value&quot;:&quot;12px&quot;},{&quot;name&quot;:&quot;full&quot;,&quot;value&quot;:&quot;9999px&quot;}]}" data-source-origins="HTML	profile-card/index.html">
          <template data-content="fallback">
            <pre data-language="html"><code data-language="html">&lt;div data-source=&quot;HTML&quot;&gt;
&lt;div class=&quot;min-h-screen bg-[#faf5eb] dark:bg-[#152238] flex items-center justify-center p-6&quot;&gt;
  &lt;div class=&quot;bg-[#fffbf2] dark:bg-[#1a2940] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors&quot;&gt;
    &lt;!-- Cover Image --&gt;
    &lt;div class=&quot;h-32 bg-gradient-to-r from-[#457b9d] to-[#a8dadc]&quot;&gt;&lt;/div&gt;

    &lt;!-- Profile Content --&gt;
    &lt;div class=&quot;relative px-6 pb-6&quot;&gt;
      &lt;!-- Avatar --&gt;
      &lt;div class=&quot;flex justify-center -mt-16 mb-4&quot;&gt;
        &lt;img
          src=&quot;https://i.pravatar.cc/120?img=32&quot;
          alt=&quot;Profile&quot;
          class=&quot;w-32 h-32 rounded-full border-4 border-[#fffbf2] dark:border-[#1a2940] shadow-lg&quot;
        /&gt;
      &lt;/div&gt;

      &lt;!-- User Info --&gt;
      &lt;div class=&quot;text-center mb-6&quot;&gt;
        &lt;h2 class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee] mb-1&quot;&gt;Sarah Johnson&lt;/h2&gt;
        &lt;p class=&quot;text-[#5a7a90] dark:text-[#a8dadc] text-sm mb-3&quot;&gt;@sarahjohnson&lt;/p&gt;
        &lt;p class=&quot;text-[#1d3557]/80 dark:text-[#f1faee]/80 leading-relaxed&quot;&gt;
          Product designer passionate about crafting delightful user experiences.
          Coffee enthusiast ☕️
        &lt;/p&gt;
      &lt;/div&gt;

      &lt;!-- Stats --&gt;
      &lt;div class=&quot;flex justify-around py-4 border-y border-[#d8e4de] dark:border-white/10 mb-6&quot;&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;1.2k&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Followers&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;842&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Following&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;94&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Posts&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!-- Action Buttons --&gt;
      &lt;div class=&quot;flex gap-3&quot;&gt;
        &lt;button class=&quot;flex-1 bg-gradient-to-r from-[#457b9d] to-[#376585] text-white font-semibold py-3 rounded-xl hover:from-[#376585] hover:to-[#1d3557] transition-all shadow-lg shadow-[#457b9d]/30 dark:shadow-[#457b9d]/20&quot;&gt;
          Follow
        &lt;/button&gt;
        &lt;button class=&quot;flex-1 border-2 border-[#d8e4de] dark:border-[#263850] text-[#1d3557] dark:text-[#f1faee] font-semibold py-3 rounded-xl hover:bg-[#fdf0d5] dark:hover:bg-[#203048] transition-all&quot;&gt;
          Message
        &lt;/button&gt;
      &lt;/div&gt;

      &lt;!-- Social Links --&gt;
      &lt;div class=&quot;flex justify-center gap-4 mt-6&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;</code></pre>
          </template>
          <template data-content="source">&lt;div data-source=&quot;HTML&quot;&gt;
&lt;div class=&quot;min-h-screen bg-[#faf5eb] dark:bg-[#152238] flex items-center justify-center p-6&quot;&gt;
  &lt;div class=&quot;bg-[#fffbf2] dark:bg-[#1a2940] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors&quot;&gt;
    &lt;!-- Cover Image --&gt;
    &lt;div class=&quot;h-32 bg-gradient-to-r from-[#457b9d] to-[#a8dadc]&quot;&gt;&lt;/div&gt;

    &lt;!-- Profile Content --&gt;
    &lt;div class=&quot;relative px-6 pb-6&quot;&gt;
      &lt;!-- Avatar --&gt;
      &lt;div class=&quot;flex justify-center -mt-16 mb-4&quot;&gt;
        &lt;img
          src=&quot;https://i.pravatar.cc/120?img=32&quot;
          alt=&quot;Profile&quot;
          class=&quot;w-32 h-32 rounded-full border-4 border-[#fffbf2] dark:border-[#1a2940] shadow-lg&quot;
        /&gt;
      &lt;/div&gt;

      &lt;!-- User Info --&gt;
      &lt;div class=&quot;text-center mb-6&quot;&gt;
        &lt;h2 class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee] mb-1&quot;&gt;Sarah Johnson&lt;/h2&gt;
        &lt;p class=&quot;text-[#5a7a90] dark:text-[#a8dadc] text-sm mb-3&quot;&gt;@sarahjohnson&lt;/p&gt;
        &lt;p class=&quot;text-[#1d3557]/80 dark:text-[#f1faee]/80 leading-relaxed&quot;&gt;
          Product designer passionate about crafting delightful user experiences.
          Coffee enthusiast ☕️
        &lt;/p&gt;
      &lt;/div&gt;

      &lt;!-- Stats --&gt;
      &lt;div class=&quot;flex justify-around py-4 border-y border-[#d8e4de] dark:border-white/10 mb-6&quot;&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;1.2k&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Followers&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;842&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Following&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;94&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Posts&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!-- Action Buttons --&gt;
      &lt;div class=&quot;flex gap-3&quot;&gt;
        &lt;button class=&quot;flex-1 bg-gradient-to-r from-[#457b9d] to-[#376585] text-white font-semibold py-3 rounded-xl hover:from-[#376585] hover:to-[#1d3557] transition-all shadow-lg shadow-[#457b9d]/30 dark:shadow-[#457b9d]/20&quot;&gt;
          Follow
        &lt;/button&gt;
        &lt;button class=&quot;flex-1 border-2 border-[#d8e4de] dark:border-[#263850] text-[#1d3557] dark:text-[#f1faee] font-semibold py-3 rounded-xl hover:bg-[#fdf0d5] dark:hover:bg-[#203048] transition-all&quot;&gt;
          Message
        &lt;/button&gt;
      &lt;/div&gt;

      &lt;!-- Social Links --&gt;
      &lt;div class=&quot;flex justify-center gap-4 mt-6&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;</template>
        </rf-sandbox>
      </div>
    </div>
    <div data-field="panel" class="rf-juxtapose-panel" data-rune="juxtapose-panel" data-density="full" data-state="inactive">
      <div data-name="body" class="rf-juxtapose-panel__body">
        <rf-sandbox class="rf-sandbox" data-color-scheme="dark" data-rune="sandbox" data-density="compact" data-source-content="&lt;div data-source=&quot;HTML&quot;&gt;
&lt;div class=&quot;min-h-screen bg-[#faf5eb] dark:bg-[#152238] flex items-center justify-center p-6&quot;&gt;
  &lt;div class=&quot;bg-[#fffbf2] dark:bg-[#1a2940] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors&quot;&gt;
    &lt;!-- Cover Image --&gt;
    &lt;div class=&quot;h-32 bg-gradient-to-r from-[#457b9d] to-[#a8dadc]&quot;&gt;&lt;/div&gt;

    &lt;!-- Profile Content --&gt;
    &lt;div class=&quot;relative px-6 pb-6&quot;&gt;
      &lt;!-- Avatar --&gt;
      &lt;div class=&quot;flex justify-center -mt-16 mb-4&quot;&gt;
        &lt;img
          src=&quot;https://i.pravatar.cc/120?img=32&quot;
          alt=&quot;Profile&quot;
          class=&quot;w-32 h-32 rounded-full border-4 border-[#fffbf2] dark:border-[#1a2940] shadow-lg&quot;
        /&gt;
      &lt;/div&gt;

      &lt;!-- User Info --&gt;
      &lt;div class=&quot;text-center mb-6&quot;&gt;
        &lt;h2 class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee] mb-1&quot;&gt;Sarah Johnson&lt;/h2&gt;
        &lt;p class=&quot;text-[#5a7a90] dark:text-[#a8dadc] text-sm mb-3&quot;&gt;@sarahjohnson&lt;/p&gt;
        &lt;p class=&quot;text-[#1d3557]/80 dark:text-[#f1faee]/80 leading-relaxed&quot;&gt;
          Product designer passionate about crafting delightful user experiences.
          Coffee enthusiast ☕️
        &lt;/p&gt;
      &lt;/div&gt;

      &lt;!-- Stats --&gt;
      &lt;div class=&quot;flex justify-around py-4 border-y border-[#d8e4de] dark:border-white/10 mb-6&quot;&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;1.2k&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Followers&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;842&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Following&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;94&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Posts&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!-- Action Buttons --&gt;
      &lt;div class=&quot;flex gap-3&quot;&gt;
        &lt;button class=&quot;flex-1 bg-gradient-to-r from-[#457b9d] to-[#376585] text-white font-semibold py-3 rounded-xl hover:from-[#376585] hover:to-[#1d3557] transition-all shadow-lg shadow-[#457b9d]/30 dark:shadow-[#457b9d]/20&quot;&gt;
          Follow
        &lt;/button&gt;
        &lt;button class=&quot;flex-1 border-2 border-[#d8e4de] dark:border-[#263850] text-[#1d3557] dark:text-[#f1faee] font-semibold py-3 rounded-xl hover:bg-[#fdf0d5] dark:hover:bg-[#203048] transition-all&quot;&gt;
          Message
        &lt;/button&gt;
      &lt;/div&gt;

      &lt;!-- Social Links --&gt;
      &lt;div class=&quot;flex justify-center gap-4 mt-6&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;" data-framework="tailwind" data-height="auto" data-design-tokens="{&quot;fonts&quot;:[{&quot;role&quot;:&quot;heading&quot;,&quot;family&quot;:&quot;Inter&quot;,&quot;weights&quot;:[400,600,700],&quot;category&quot;:&quot;sans-serif&quot;},{&quot;role&quot;:&quot;body&quot;,&quot;family&quot;:&quot;Source Sans Pro&quot;,&quot;weights&quot;:[400,600],&quot;category&quot;:&quot;sans-serif&quot;},{&quot;role&quot;:&quot;mono&quot;,&quot;family&quot;:&quot;Fira Code&quot;,&quot;weights&quot;:[400],&quot;category&quot;:&quot;monospace&quot;}],&quot;colors&quot;:[{&quot;name&quot;:&quot;Primary&quot;,&quot;value&quot;:&quot;#2563EB&quot;,&quot;group&quot;:&quot;Brand&quot;},{&quot;name&quot;:&quot;Secondary&quot;,&quot;value&quot;:&quot;#7C3AED&quot;,&quot;group&quot;:&quot;Brand&quot;},{&quot;name&quot;:&quot;Accent&quot;,&quot;value&quot;:&quot;#F59E0B&quot;,&quot;group&quot;:&quot;Brand&quot;},{&quot;name&quot;:&quot;Gray&quot;,&quot;value&quot;:&quot;#F9FAFB&quot;,&quot;group&quot;:&quot;Neutral&quot;},{&quot;name&quot;:&quot;Gray&quot;,&quot;value&quot;:&quot;#E5E7EB&quot;,&quot;group&quot;:&quot;Neutral&quot;},{&quot;name&quot;:&quot;Gray&quot;,&quot;value&quot;:&quot;#9CA3AF&quot;,&quot;group&quot;:&quot;Neutral&quot;},{&quot;name&quot;:&quot;Gray&quot;,&quot;value&quot;:&quot;#374151&quot;,&quot;group&quot;:&quot;Neutral&quot;},{&quot;name&quot;:&quot;Gray&quot;,&quot;value&quot;:&quot;#111827&quot;,&quot;group&quot;:&quot;Neutral&quot;}],&quot;spacing&quot;:{&quot;unit&quot;:&quot;4px&quot;,&quot;scale&quot;:[&quot;4&quot;,&quot;8&quot;,&quot;12&quot;,&quot;16&quot;,&quot;24&quot;,&quot;32&quot;,&quot;48&quot;,&quot;64&quot;]},&quot;radii&quot;:[{&quot;name&quot;:&quot;sm&quot;,&quot;value&quot;:&quot;4px&quot;},{&quot;name&quot;:&quot;md&quot;,&quot;value&quot;:&quot;8px&quot;},{&quot;name&quot;:&quot;lg&quot;,&quot;value&quot;:&quot;12px&quot;},{&quot;name&quot;:&quot;full&quot;,&quot;value&quot;:&quot;9999px&quot;}]}" data-source-origins="HTML	profile-card/index.html">
          <template data-content="fallback">
            <pre data-language="html"><code data-language="html">&lt;div data-source=&quot;HTML&quot;&gt;
&lt;div class=&quot;min-h-screen bg-[#faf5eb] dark:bg-[#152238] flex items-center justify-center p-6&quot;&gt;
  &lt;div class=&quot;bg-[#fffbf2] dark:bg-[#1a2940] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors&quot;&gt;
    &lt;!-- Cover Image --&gt;
    &lt;div class=&quot;h-32 bg-gradient-to-r from-[#457b9d] to-[#a8dadc]&quot;&gt;&lt;/div&gt;

    &lt;!-- Profile Content --&gt;
    &lt;div class=&quot;relative px-6 pb-6&quot;&gt;
      &lt;!-- Avatar --&gt;
      &lt;div class=&quot;flex justify-center -mt-16 mb-4&quot;&gt;
        &lt;img
          src=&quot;https://i.pravatar.cc/120?img=32&quot;
          alt=&quot;Profile&quot;
          class=&quot;w-32 h-32 rounded-full border-4 border-[#fffbf2] dark:border-[#1a2940] shadow-lg&quot;
        /&gt;
      &lt;/div&gt;

      &lt;!-- User Info --&gt;
      &lt;div class=&quot;text-center mb-6&quot;&gt;
        &lt;h2 class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee] mb-1&quot;&gt;Sarah Johnson&lt;/h2&gt;
        &lt;p class=&quot;text-[#5a7a90] dark:text-[#a8dadc] text-sm mb-3&quot;&gt;@sarahjohnson&lt;/p&gt;
        &lt;p class=&quot;text-[#1d3557]/80 dark:text-[#f1faee]/80 leading-relaxed&quot;&gt;
          Product designer passionate about crafting delightful user experiences.
          Coffee enthusiast ☕️
        &lt;/p&gt;
      &lt;/div&gt;

      &lt;!-- Stats --&gt;
      &lt;div class=&quot;flex justify-around py-4 border-y border-[#d8e4de] dark:border-white/10 mb-6&quot;&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;1.2k&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Followers&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;842&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Following&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;94&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Posts&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!-- Action Buttons --&gt;
      &lt;div class=&quot;flex gap-3&quot;&gt;
        &lt;button class=&quot;flex-1 bg-gradient-to-r from-[#457b9d] to-[#376585] text-white font-semibold py-3 rounded-xl hover:from-[#376585] hover:to-[#1d3557] transition-all shadow-lg shadow-[#457b9d]/30 dark:shadow-[#457b9d]/20&quot;&gt;
          Follow
        &lt;/button&gt;
        &lt;button class=&quot;flex-1 border-2 border-[#d8e4de] dark:border-[#263850] text-[#1d3557] dark:text-[#f1faee] font-semibold py-3 rounded-xl hover:bg-[#fdf0d5] dark:hover:bg-[#203048] transition-all&quot;&gt;
          Message
        &lt;/button&gt;
      &lt;/div&gt;

      &lt;!-- Social Links --&gt;
      &lt;div class=&quot;flex justify-center gap-4 mt-6&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;</code></pre>
          </template>
          <template data-content="source">&lt;div data-source=&quot;HTML&quot;&gt;
&lt;div class=&quot;min-h-screen bg-[#faf5eb] dark:bg-[#152238] flex items-center justify-center p-6&quot;&gt;
  &lt;div class=&quot;bg-[#fffbf2] dark:bg-[#1a2940] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors&quot;&gt;
    &lt;!-- Cover Image --&gt;
    &lt;div class=&quot;h-32 bg-gradient-to-r from-[#457b9d] to-[#a8dadc]&quot;&gt;&lt;/div&gt;

    &lt;!-- Profile Content --&gt;
    &lt;div class=&quot;relative px-6 pb-6&quot;&gt;
      &lt;!-- Avatar --&gt;
      &lt;div class=&quot;flex justify-center -mt-16 mb-4&quot;&gt;
        &lt;img
          src=&quot;https://i.pravatar.cc/120?img=32&quot;
          alt=&quot;Profile&quot;
          class=&quot;w-32 h-32 rounded-full border-4 border-[#fffbf2] dark:border-[#1a2940] shadow-lg&quot;
        /&gt;
      &lt;/div&gt;

      &lt;!-- User Info --&gt;
      &lt;div class=&quot;text-center mb-6&quot;&gt;
        &lt;h2 class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee] mb-1&quot;&gt;Sarah Johnson&lt;/h2&gt;
        &lt;p class=&quot;text-[#5a7a90] dark:text-[#a8dadc] text-sm mb-3&quot;&gt;@sarahjohnson&lt;/p&gt;
        &lt;p class=&quot;text-[#1d3557]/80 dark:text-[#f1faee]/80 leading-relaxed&quot;&gt;
          Product designer passionate about crafting delightful user experiences.
          Coffee enthusiast ☕️
        &lt;/p&gt;
      &lt;/div&gt;

      &lt;!-- Stats --&gt;
      &lt;div class=&quot;flex justify-around py-4 border-y border-[#d8e4de] dark:border-white/10 mb-6&quot;&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;1.2k&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Followers&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;842&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Following&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;text-2xl font-bold text-[#1d3557] dark:text-[#f1faee]&quot;&gt;94&lt;/div&gt;
          &lt;div class=&quot;text-xs text-[#5a7a90] dark:text-[#a8dadc] uppercase tracking-wide&quot;&gt;Posts&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!-- Action Buttons --&gt;
      &lt;div class=&quot;flex gap-3&quot;&gt;
        &lt;button class=&quot;flex-1 bg-gradient-to-r from-[#457b9d] to-[#376585] text-white font-semibold py-3 rounded-xl hover:from-[#376585] hover:to-[#1d3557] transition-all shadow-lg shadow-[#457b9d]/30 dark:shadow-[#457b9d]/20&quot;&gt;
          Follow
        &lt;/button&gt;
        &lt;button class=&quot;flex-1 border-2 border-[#d8e4de] dark:border-[#263850] text-[#1d3557] dark:text-[#f1faee] font-semibold py-3 rounded-xl hover:bg-[#fdf0d5] dark:hover:bg-[#203048] transition-all&quot;&gt;
          Message
        &lt;/button&gt;
      &lt;/div&gt;

      &lt;!-- Social Links --&gt;
      &lt;div class=&quot;flex justify-center gap-4 mt-6&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;w-10 h-10 flex items-center justify-center rounded-full bg-[#f9ebcc] dark:bg-[#203048] text-[#5a7a90] dark:text-[#a8dadc] hover:bg-[#a8dadc]/20 dark:hover:bg-[#457b9d]/20 hover:text-[#457b9d] dark:hover:text-[#a8dadc] transition-all&quot;&gt;
          &lt;svg class=&quot;w-5 h-5&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path d=&quot;M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z&quot;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;</template>
        </rf-sandbox>
      </div>
    </div>
  </div>
</section>

Toggle variant

Use variant="toggle" for a button-based A/B switch between panels. Labels appear on the toggle buttons rather than overlaid on the content.

{% juxtapose variant="toggle" labels="Summer, Winter" %}

![Oak tree summer](https://assets.refrakt.md/oak-tree-summer.png)

---

![Oak tree winter](https://assets.refrakt.md/oak-tree-winter.png)

{% /juxtapose %}
<section data-rune="juxtapose">
  <meta content="toggle" data-field="variant">
  <meta content="vertical" data-field="orientation">
  <meta content="50" data-field="position">
  <meta content="1000" data-field="duration">
  <div data-name="panels">
    <div data-field="panel" data-rune="juxtapose-panel">
      <span data-name="name">Summer</span>
      <div data-name="body">
        <img src="https://assets.refrakt.md/oak-tree-summer.png" alt="Oak tree summer">
      </div>
    </div>
    <div data-field="panel" data-rune="juxtapose-panel">
      <span data-name="name">Winter</span>
      <div data-name="body">
        <img src="https://assets.refrakt.md/oak-tree-winter.png" alt="Oak tree winter">
      </div>
    </div>
  </div>
</section>
Summer
Oak tree summer
Winter
Oak tree winter
<section class="rf-juxtapose rf-juxtapose--toggle" data-variant="toggle" data-orientation="vertical" data-position="50" data-duration="1000" data-rune="juxtapose" data-density="compact" style="--jx-position: 50; --jx-duration: 1000">
  <div data-name="panels" class="rf-juxtapose__panels">
    <div data-field="panel" class="rf-juxtapose-panel" data-rune="juxtapose-panel" data-density="full" data-state="inactive">
      <span data-name="name" class="rf-juxtapose-panel__name">Summer</span>
      <div data-name="body" class="rf-juxtapose-panel__body">
        <img src="https://assets.refrakt.md/oak-tree-summer.png" alt="Oak tree summer" />
      </div>
    </div>
    <div data-field="panel" class="rf-juxtapose-panel" data-rune="juxtapose-panel" data-density="full" data-state="inactive">
      <span data-name="name" class="rf-juxtapose-panel__name">Winter</span>
      <div data-name="body" class="rf-juxtapose-panel__body">
        <img src="https://assets.refrakt.md/oak-tree-winter.png" alt="Oak tree winter" />
      </div>
    </div>
  </div>
</section>

Fade variant

Use variant="fade" for a crossfade transition between panels. The duration attribute controls animation speed in milliseconds.

{% juxtapose variant="fade" labels="Summer, Winter" duration=800 %}

![Oak tree summer](https://assets.refrakt.md/oak-tree-summer.png)

---

![Oak tree winter](https://assets.refrakt.md/oak-tree-winter.png)

{% /juxtapose %}
<section data-rune="juxtapose">
  <meta content="fade" data-field="variant">
  <meta content="vertical" data-field="orientation">
  <meta content="50" data-field="position">
  <meta content="800" data-field="duration">
  <div data-name="panels">
    <div data-field="panel" data-rune="juxtapose-panel">
      <span data-name="name">Summer</span>
      <div data-name="body">
        <img src="https://assets.refrakt.md/oak-tree-summer.png" alt="Oak tree summer">
      </div>
    </div>
    <div data-field="panel" data-rune="juxtapose-panel">
      <span data-name="name">Winter</span>
      <div data-name="body">
        <img src="https://assets.refrakt.md/oak-tree-winter.png" alt="Oak tree winter">
      </div>
    </div>
  </div>
</section>
Summer
Oak tree summer
Winter
Oak tree winter
<section class="rf-juxtapose rf-juxtapose--fade" data-variant="fade" data-orientation="vertical" data-position="50" data-duration="800" data-rune="juxtapose" data-density="compact" style="--jx-position: 50; --jx-duration: 800">
  <div data-name="panels" class="rf-juxtapose__panels">
    <div data-field="panel" class="rf-juxtapose-panel" data-rune="juxtapose-panel" data-density="full" data-state="inactive">
      <span data-name="name" class="rf-juxtapose-panel__name">Summer</span>
      <div data-name="body" class="rf-juxtapose-panel__body">
        <img src="https://assets.refrakt.md/oak-tree-summer.png" alt="Oak tree summer" />
      </div>
    </div>
    <div data-field="panel" class="rf-juxtapose-panel" data-rune="juxtapose-panel" data-density="full" data-state="inactive">
      <span data-name="name" class="rf-juxtapose-panel__name">Winter</span>
      <div data-name="body" class="rf-juxtapose-panel__body">
        <img src="https://assets.refrakt.md/oak-tree-winter.png" alt="Oak tree winter" />
      </div>
    </div>
  </div>
</section>

Auto variant

Use variant="auto" for scroll-triggered animation that automatically moves the slider position as the reader scrolls past.

{% juxtapose variant="auto" labels="Summer, Winter" duration=2000 %}

![Oak tree summer](https://assets.refrakt.md/oak-tree-summer.png)

---

![Oak tree winter](https://assets.refrakt.md/oak-tree-winter.png)

{% /juxtapose %}
<section data-rune="juxtapose">
  <meta content="auto" data-field="variant">
  <meta content="vertical" data-field="orientation">
  <meta content="50" data-field="position">
  <meta content="2000" data-field="duration">
  <div data-name="panels">
    <div data-field="panel" data-rune="juxtapose-panel">
      <span data-name="name">Summer</span>
      <div data-name="body">
        <img src="https://assets.refrakt.md/oak-tree-summer.png" alt="Oak tree summer">
      </div>
    </div>
    <div data-field="panel" data-rune="juxtapose-panel">
      <span data-name="name">Winter</span>
      <div data-name="body">
        <img src="https://assets.refrakt.md/oak-tree-winter.png" alt="Oak tree winter">
      </div>
    </div>
  </div>
</section>
Summer
Oak tree summer
Winter
Oak tree winter
<section class="rf-juxtapose rf-juxtapose--auto" data-variant="auto" data-orientation="vertical" data-position="50" data-duration="2000" data-rune="juxtapose" data-density="compact" style="--jx-position: 50; --jx-duration: 2000">
  <div data-name="panels" class="rf-juxtapose__panels">
    <div data-field="panel" class="rf-juxtapose-panel" data-rune="juxtapose-panel" data-density="full" data-state="inactive">
      <span data-name="name" class="rf-juxtapose-panel__name">Summer</span>
      <div data-name="body" class="rf-juxtapose-panel__body">
        <img src="https://assets.refrakt.md/oak-tree-summer.png" alt="Oak tree summer" />
      </div>
    </div>
    <div data-field="panel" class="rf-juxtapose-panel" data-rune="juxtapose-panel" data-density="full" data-state="inactive">
      <span data-name="name" class="rf-juxtapose-panel__name">Winter</span>
      <div data-name="body" class="rf-juxtapose-panel__body">
        <img src="https://assets.refrakt.md/oak-tree-winter.png" alt="Oak tree winter" />
      </div>
    </div>
  </div>
</section>

Horizontal orientation

Use orientation="horizontal" to stack panels vertically with a horizontal divider. The default is vertical (side-by-side with a vertical divider).

{% juxtapose orientation="horizontal" labels="Summer, Winter" %}

![Oak tree summer](https://assets.refrakt.md/oak-tree-summer.png)

---

![Oak tree winter](https://assets.refrakt.md/oak-tree-winter.png)

{% /juxtapose %}
<section data-rune="juxtapose">
  <meta content="slider" data-field="variant">
  <meta content="horizontal" data-field="orientation">
  <meta content="50" data-field="position">
  <meta content="1000" data-field="duration">
  <div data-name="panels">
    <div data-field="panel" data-rune="juxtapose-panel">
      <span data-name="name">Summer</span>
      <div data-name="body">
        <img src="https://assets.refrakt.md/oak-tree-summer.png" alt="Oak tree summer">
      </div>
    </div>
    <div data-field="panel" data-rune="juxtapose-panel">
      <span data-name="name">Winter</span>
      <div data-name="body">
        <img src="https://assets.refrakt.md/oak-tree-winter.png" alt="Oak tree winter">
      </div>
    </div>
  </div>
</section>
Summer
Oak tree summer
Winter
Oak tree winter
<section class="rf-juxtapose rf-juxtapose--slider" data-variant="slider" data-orientation="horizontal" data-position="50" data-duration="1000" data-rune="juxtapose" data-density="compact" style="--jx-position: 50; --jx-duration: 1000">
  <div data-name="panels" class="rf-juxtapose__panels">
    <div data-field="panel" class="rf-juxtapose-panel" data-rune="juxtapose-panel" data-density="full" data-state="inactive">
      <span data-name="name" class="rf-juxtapose-panel__name">Summer</span>
      <div data-name="body" class="rf-juxtapose-panel__body">
        <img src="https://assets.refrakt.md/oak-tree-summer.png" alt="Oak tree summer" />
      </div>
    </div>
    <div data-field="panel" class="rf-juxtapose-panel" data-rune="juxtapose-panel" data-density="full" data-state="inactive">
      <span data-name="name" class="rf-juxtapose-panel__name">Winter</span>
      <div data-name="body" class="rf-juxtapose-panel__body">
        <img src="https://assets.refrakt.md/oak-tree-winter.png" alt="Oak tree winter" />
      </div>
    </div>
  </div>
</section>

Markdown reinterpretation

MarkdownInterpretation
---Panel separator
Content between separatorsPanel body

Attributes

AttributeTypeDefaultDescription
variantstringsliderInteraction mode: slider, toggle, fade, or auto
orientationstringverticalDivider axis for slider/auto variants: horizontal or vertical
positionnumber50Initial slider position as a percentage (0-100)
durationnumber1000Animation duration in milliseconds (fade/auto variants)
labelsstring-Comma-separated labels for the two panels. Displayed as overlays (or on toggle buttons for the toggle variant)

Common attributes

All block runes share these attributes for layout and theming.

AttributeTypeDefaultDescription
widthstringcontentPage grid width: content, wide, or full
spacingstring-Vertical spacing: flush, tight, default, loose, or breathe
insetstring-Horizontal padding: flush, tight, default, loose, or breathe
tintstring-Named colour tint from theme configuration
tint-modestringautoColour scheme override: auto, dark, or light
bgstring-Named background preset from theme configuration