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 %}
---
{% /juxtapose %}<section data-rune="juxtapose" data-rune-fields="{"variant":"slider","orientation":"vertical","position":"50","duration":"1000"}">
<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>
<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" data-rune-fields="{"variant":"slider","orientation":"vertical","position":"50","duration":"1000"}">
<div data-name="panels">
<div data-field="panel" data-rune="juxtapose-panel">
<div data-name="body">
<rf-sandbox data-rune="sandbox" data-source-content="<div data-source="HTML">
<div class="min-h-screen bg-[#f5f4f1] dark:bg-[#1a1a17] flex items-center justify-center p-6">
<div class="bg-[#fbfaf7] dark:bg-[#211f1c] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#e15f80] to-[#c4501c] dark:from-[#e8788f] dark:to-[#e87a3a]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fbfaf7] dark:border-[#211f1c] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef] mb-1">Sarah Johnson</h2>
<p class="text-[#6b6661] dark:text-[#94908a] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1c1a17]/80 dark:text-[#f6f4ef]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#e2e0dd] dark:border-[#2a2825] mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">1.2k</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">842</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">94</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#e15f80] to-[#c84a6c] dark:from-[#e8788f] dark:to-[#ef91a3] text-white font-semibold py-3 rounded-xl hover:from-[#c84a6c] hover:to-[#b35070] dark:hover:from-[#ef91a3] dark:hover:to-[#e89db0] transition-all shadow-lg shadow-[#e15f80]/30 dark:shadow-[#e8788f]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#e2e0dd] dark:border-[#2a2825] text-[#1c1a17] dark:text-[#f6f4ef] font-semibold py-3 rounded-xl hover:bg-[#ecebe8] dark:hover:bg-[#2a2825] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
</div>
</div>
</div>
</div>
</div>" data-framework="tailwind" data-height="auto" data-source-origins="HTML profile-card/index.html" data-security-mode="trusted" data-allow-js="true">
<template data-content="fallback">
<pre data-language="html">
<code data-language="html"><div data-source="HTML">
<div class="min-h-screen bg-[#f5f4f1] dark:bg-[#1a1a17] flex items-center justify-center p-6">
<div class="bg-[#fbfaf7] dark:bg-[#211f1c] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#e15f80] to-[#c4501c] dark:from-[#e8788f] dark:to-[#e87a3a]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fbfaf7] dark:border-[#211f1c] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef] mb-1">Sarah Johnson</h2>
<p class="text-[#6b6661] dark:text-[#94908a] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1c1a17]/80 dark:text-[#f6f4ef]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#e2e0dd] dark:border-[#2a2825] mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">1.2k</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">842</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">94</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#e15f80] to-[#c84a6c] dark:from-[#e8788f] dark:to-[#ef91a3] text-white font-semibold py-3 rounded-xl hover:from-[#c84a6c] hover:to-[#b35070] dark:hover:from-[#ef91a3] dark:hover:to-[#e89db0] transition-all shadow-lg shadow-[#e15f80]/30 dark:shadow-[#e8788f]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#e2e0dd] dark:border-[#2a2825] text-[#1c1a17] dark:text-[#f6f4ef] font-semibold py-3 rounded-xl hover:bg-[#ecebe8] dark:hover:bg-[#2a2825] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
</div>
</div>
</div>
</div>
</div></code>
</pre>
</template>
<template data-content="source"><div data-source="HTML">
<div class="min-h-screen bg-[#f5f4f1] dark:bg-[#1a1a17] flex items-center justify-center p-6">
<div class="bg-[#fbfaf7] dark:bg-[#211f1c] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#e15f80] to-[#c4501c] dark:from-[#e8788f] dark:to-[#e87a3a]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fbfaf7] dark:border-[#211f1c] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef] mb-1">Sarah Johnson</h2>
<p class="text-[#6b6661] dark:text-[#94908a] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1c1a17]/80 dark:text-[#f6f4ef]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#e2e0dd] dark:border-[#2a2825] mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">1.2k</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">842</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">94</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#e15f80] to-[#c84a6c] dark:from-[#e8788f] dark:to-[#ef91a3] text-white font-semibold py-3 rounded-xl hover:from-[#c84a6c] hover:to-[#b35070] dark:hover:from-[#ef91a3] dark:hover:to-[#e89db0] transition-all shadow-lg shadow-[#e15f80]/30 dark:shadow-[#e8788f]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#e2e0dd] dark:border-[#2a2825] text-[#1c1a17] dark:text-[#f6f4ef] font-semibold py-3 rounded-xl hover:bg-[#ecebe8] dark:hover:bg-[#2a2825] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
</div>
</div>
</div>
</div>
</div></template>
<meta data-field="tint-mode" content="light">
</rf-sandbox>
</div>
</div>
<div data-field="panel" data-rune="juxtapose-panel">
<div data-name="body">
<rf-sandbox data-rune="sandbox" data-source-content="<div data-source="HTML">
<div class="min-h-screen bg-[#f5f4f1] dark:bg-[#1a1a17] flex items-center justify-center p-6">
<div class="bg-[#fbfaf7] dark:bg-[#211f1c] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#e15f80] to-[#c4501c] dark:from-[#e8788f] dark:to-[#e87a3a]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fbfaf7] dark:border-[#211f1c] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef] mb-1">Sarah Johnson</h2>
<p class="text-[#6b6661] dark:text-[#94908a] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1c1a17]/80 dark:text-[#f6f4ef]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#e2e0dd] dark:border-[#2a2825] mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">1.2k</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">842</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">94</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#e15f80] to-[#c84a6c] dark:from-[#e8788f] dark:to-[#ef91a3] text-white font-semibold py-3 rounded-xl hover:from-[#c84a6c] hover:to-[#b35070] dark:hover:from-[#ef91a3] dark:hover:to-[#e89db0] transition-all shadow-lg shadow-[#e15f80]/30 dark:shadow-[#e8788f]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#e2e0dd] dark:border-[#2a2825] text-[#1c1a17] dark:text-[#f6f4ef] font-semibold py-3 rounded-xl hover:bg-[#ecebe8] dark:hover:bg-[#2a2825] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
</div>
</div>
</div>
</div>
</div>" data-framework="tailwind" data-height="auto" data-source-origins="HTML profile-card/index.html" data-security-mode="trusted" data-allow-js="true">
<template data-content="fallback">
<pre data-language="html">
<code data-language="html"><div data-source="HTML">
<div class="min-h-screen bg-[#f5f4f1] dark:bg-[#1a1a17] flex items-center justify-center p-6">
<div class="bg-[#fbfaf7] dark:bg-[#211f1c] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#e15f80] to-[#c4501c] dark:from-[#e8788f] dark:to-[#e87a3a]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fbfaf7] dark:border-[#211f1c] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef] mb-1">Sarah Johnson</h2>
<p class="text-[#6b6661] dark:text-[#94908a] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1c1a17]/80 dark:text-[#f6f4ef]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#e2e0dd] dark:border-[#2a2825] mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">1.2k</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">842</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">94</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#e15f80] to-[#c84a6c] dark:from-[#e8788f] dark:to-[#ef91a3] text-white font-semibold py-3 rounded-xl hover:from-[#c84a6c] hover:to-[#b35070] dark:hover:from-[#ef91a3] dark:hover:to-[#e89db0] transition-all shadow-lg shadow-[#e15f80]/30 dark:shadow-[#e8788f]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#e2e0dd] dark:border-[#2a2825] text-[#1c1a17] dark:text-[#f6f4ef] font-semibold py-3 rounded-xl hover:bg-[#ecebe8] dark:hover:bg-[#2a2825] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
</div>
</div>
</div>
</div>
</div></code>
</pre>
</template>
<template data-content="source"><div data-source="HTML">
<div class="min-h-screen bg-[#f5f4f1] dark:bg-[#1a1a17] flex items-center justify-center p-6">
<div class="bg-[#fbfaf7] dark:bg-[#211f1c] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#e15f80] to-[#c4501c] dark:from-[#e8788f] dark:to-[#e87a3a]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fbfaf7] dark:border-[#211f1c] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef] mb-1">Sarah Johnson</h2>
<p class="text-[#6b6661] dark:text-[#94908a] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1c1a17]/80 dark:text-[#f6f4ef]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#e2e0dd] dark:border-[#2a2825] mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">1.2k</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">842</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">94</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#e15f80] to-[#c84a6c] dark:from-[#e8788f] dark:to-[#ef91a3] text-white font-semibold py-3 rounded-xl hover:from-[#c84a6c] hover:to-[#b35070] dark:hover:from-[#ef91a3] dark:hover:to-[#e89db0] transition-all shadow-lg shadow-[#e15f80]/30 dark:shadow-[#e8788f]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#e2e0dd] dark:border-[#2a2825] text-[#1c1a17] dark:text-[#f6f4ef] font-semibold py-3 rounded-xl hover:bg-[#ecebe8] dark:hover:bg-[#2a2825] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
</div>
</div>
</div>
</div>
</div></template>
<meta data-field="tint-mode" content="dark">
</rf-sandbox>
</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-source-content="<div data-source="HTML">
<div class="min-h-screen bg-[#f5f4f1] dark:bg-[#1a1a17] flex items-center justify-center p-6">
<div class="bg-[#fbfaf7] dark:bg-[#211f1c] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#e15f80] to-[#c4501c] dark:from-[#e8788f] dark:to-[#e87a3a]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fbfaf7] dark:border-[#211f1c] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef] mb-1">Sarah Johnson</h2>
<p class="text-[#6b6661] dark:text-[#94908a] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1c1a17]/80 dark:text-[#f6f4ef]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#e2e0dd] dark:border-[#2a2825] mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">1.2k</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">842</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">94</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#e15f80] to-[#c84a6c] dark:from-[#e8788f] dark:to-[#ef91a3] text-white font-semibold py-3 rounded-xl hover:from-[#c84a6c] hover:to-[#b35070] dark:hover:from-[#ef91a3] dark:hover:to-[#e89db0] transition-all shadow-lg shadow-[#e15f80]/30 dark:shadow-[#e8788f]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#e2e0dd] dark:border-[#2a2825] text-[#1c1a17] dark:text-[#f6f4ef] font-semibold py-3 rounded-xl hover:bg-[#ecebe8] dark:hover:bg-[#2a2825] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
</div>
</div>
</div>
</div>
</div>" data-framework="tailwind" data-height="auto" data-source-origins="HTML profile-card/index.html" data-security-mode="trusted" data-allow-js="true" data-color-scheme="light" data-rune="sandbox" data-density="compact">
<template data-content="fallback">
<pre data-language="html"><code data-language="html"><div data-source="HTML">
<div class="min-h-screen bg-[#f5f4f1] dark:bg-[#1a1a17] flex items-center justify-center p-6">
<div class="bg-[#fbfaf7] dark:bg-[#211f1c] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#e15f80] to-[#c4501c] dark:from-[#e8788f] dark:to-[#e87a3a]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fbfaf7] dark:border-[#211f1c] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef] mb-1">Sarah Johnson</h2>
<p class="text-[#6b6661] dark:text-[#94908a] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1c1a17]/80 dark:text-[#f6f4ef]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#e2e0dd] dark:border-[#2a2825] mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">1.2k</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">842</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">94</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#e15f80] to-[#c84a6c] dark:from-[#e8788f] dark:to-[#ef91a3] text-white font-semibold py-3 rounded-xl hover:from-[#c84a6c] hover:to-[#b35070] dark:hover:from-[#ef91a3] dark:hover:to-[#e89db0] transition-all shadow-lg shadow-[#e15f80]/30 dark:shadow-[#e8788f]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#e2e0dd] dark:border-[#2a2825] text-[#1c1a17] dark:text-[#f6f4ef] font-semibold py-3 rounded-xl hover:bg-[#ecebe8] dark:hover:bg-[#2a2825] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
</div>
</div>
</div>
</div>
</div></code></pre>
</template>
<template data-content="source"><div data-source="HTML">
<div class="min-h-screen bg-[#f5f4f1] dark:bg-[#1a1a17] flex items-center justify-center p-6">
<div class="bg-[#fbfaf7] dark:bg-[#211f1c] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#e15f80] to-[#c4501c] dark:from-[#e8788f] dark:to-[#e87a3a]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fbfaf7] dark:border-[#211f1c] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef] mb-1">Sarah Johnson</h2>
<p class="text-[#6b6661] dark:text-[#94908a] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1c1a17]/80 dark:text-[#f6f4ef]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#e2e0dd] dark:border-[#2a2825] mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">1.2k</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">842</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">94</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#e15f80] to-[#c84a6c] dark:from-[#e8788f] dark:to-[#ef91a3] text-white font-semibold py-3 rounded-xl hover:from-[#c84a6c] hover:to-[#b35070] dark:hover:from-[#ef91a3] dark:hover:to-[#e89db0] transition-all shadow-lg shadow-[#e15f80]/30 dark:shadow-[#e8788f]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#e2e0dd] dark:border-[#2a2825] text-[#1c1a17] dark:text-[#f6f4ef] font-semibold py-3 rounded-xl hover:bg-[#ecebe8] dark:hover:bg-[#2a2825] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
</div>
</div>
</div>
</div>
</div></template>
<meta data-field="design-tokens" content="{"fonts":[{"role":"heading","family":"Inter","weights":[400,600,700],"category":"sans-serif"},{"role":"body","family":"Source Sans Pro","weights":[400,600],"category":"sans-serif"},{"role":"mono","family":"Fira Code","weights":[400],"category":"monospace"}],"colors":[{"name":"Primary","value":"#2563EB","group":"Brand"},{"name":"Secondary","value":"#7C3AED","group":"Brand"},{"name":"Accent","value":"#F59E0B","group":"Brand"},{"name":"Gray","value":"#F9FAFB","group":"Neutral"},{"name":"Gray","value":"#E5E7EB","group":"Neutral"},{"name":"Gray","value":"#9CA3AF","group":"Neutral"},{"name":"Gray","value":"#374151","group":"Neutral"},{"name":"Gray","value":"#111827","group":"Neutral"}],"spacing":{"unit":"4px","scale":["4","8","12","16","24","32","48","64"]},"radii":[{"name":"sm","value":"4px"},{"name":"md","value":"8px"},{"name":"lg","value":"12px"},{"name":"full","value":"9999px"}]}" />
</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-source-content="<div data-source="HTML">
<div class="min-h-screen bg-[#f5f4f1] dark:bg-[#1a1a17] flex items-center justify-center p-6">
<div class="bg-[#fbfaf7] dark:bg-[#211f1c] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#e15f80] to-[#c4501c] dark:from-[#e8788f] dark:to-[#e87a3a]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fbfaf7] dark:border-[#211f1c] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef] mb-1">Sarah Johnson</h2>
<p class="text-[#6b6661] dark:text-[#94908a] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1c1a17]/80 dark:text-[#f6f4ef]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#e2e0dd] dark:border-[#2a2825] mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">1.2k</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">842</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">94</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#e15f80] to-[#c84a6c] dark:from-[#e8788f] dark:to-[#ef91a3] text-white font-semibold py-3 rounded-xl hover:from-[#c84a6c] hover:to-[#b35070] dark:hover:from-[#ef91a3] dark:hover:to-[#e89db0] transition-all shadow-lg shadow-[#e15f80]/30 dark:shadow-[#e8788f]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#e2e0dd] dark:border-[#2a2825] text-[#1c1a17] dark:text-[#f6f4ef] font-semibold py-3 rounded-xl hover:bg-[#ecebe8] dark:hover:bg-[#2a2825] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
</div>
</div>
</div>
</div>
</div>" data-framework="tailwind" data-height="auto" data-source-origins="HTML profile-card/index.html" data-security-mode="trusted" data-allow-js="true" data-color-scheme="dark" data-rune="sandbox" data-density="compact">
<template data-content="fallback">
<pre data-language="html"><code data-language="html"><div data-source="HTML">
<div class="min-h-screen bg-[#f5f4f1] dark:bg-[#1a1a17] flex items-center justify-center p-6">
<div class="bg-[#fbfaf7] dark:bg-[#211f1c] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#e15f80] to-[#c4501c] dark:from-[#e8788f] dark:to-[#e87a3a]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fbfaf7] dark:border-[#211f1c] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef] mb-1">Sarah Johnson</h2>
<p class="text-[#6b6661] dark:text-[#94908a] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1c1a17]/80 dark:text-[#f6f4ef]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#e2e0dd] dark:border-[#2a2825] mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">1.2k</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">842</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">94</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#e15f80] to-[#c84a6c] dark:from-[#e8788f] dark:to-[#ef91a3] text-white font-semibold py-3 rounded-xl hover:from-[#c84a6c] hover:to-[#b35070] dark:hover:from-[#ef91a3] dark:hover:to-[#e89db0] transition-all shadow-lg shadow-[#e15f80]/30 dark:shadow-[#e8788f]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#e2e0dd] dark:border-[#2a2825] text-[#1c1a17] dark:text-[#f6f4ef] font-semibold py-3 rounded-xl hover:bg-[#ecebe8] dark:hover:bg-[#2a2825] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
</div>
</div>
</div>
</div>
</div></code></pre>
</template>
<template data-content="source"><div data-source="HTML">
<div class="min-h-screen bg-[#f5f4f1] dark:bg-[#1a1a17] flex items-center justify-center p-6">
<div class="bg-[#fbfaf7] dark:bg-[#211f1c] rounded-2xl shadow-xl max-w-sm w-full overflow-hidden transition-colors">
<!-- Cover Image -->
<div class="h-32 bg-gradient-to-r from-[#e15f80] to-[#c4501c] dark:from-[#e8788f] dark:to-[#e87a3a]"></div>
<!-- Profile Content -->
<div class="relative px-6 pb-6">
<!-- Avatar -->
<div class="flex justify-center -mt-16 mb-4">
<img
src="https://i.pravatar.cc/120?img=32"
alt="Profile"
class="w-32 h-32 rounded-full border-4 border-[#fbfaf7] dark:border-[#211f1c] shadow-lg"
/>
</div>
<!-- User Info -->
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef] mb-1">Sarah Johnson</h2>
<p class="text-[#6b6661] dark:text-[#94908a] text-sm mb-3">@sarahjohnson</p>
<p class="text-[#1c1a17]/80 dark:text-[#f6f4ef]/80 leading-relaxed">
Product designer passionate about crafting delightful user experiences.
Coffee enthusiast ☕️
</p>
</div>
<!-- Stats -->
<div class="flex justify-around py-4 border-y border-[#e2e0dd] dark:border-[#2a2825] mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">1.2k</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Followers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">842</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Following</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-[#1c1a17] dark:text-[#f6f4ef]">94</div>
<div class="text-xs text-[#6b6661] dark:text-[#94908a] uppercase tracking-wide">Posts</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3">
<button class="flex-1 bg-gradient-to-r from-[#e15f80] to-[#c84a6c] dark:from-[#e8788f] dark:to-[#ef91a3] text-white font-semibold py-3 rounded-xl hover:from-[#c84a6c] hover:to-[#b35070] dark:hover:from-[#ef91a3] dark:hover:to-[#e89db0] transition-all shadow-lg shadow-[#e15f80]/30 dark:shadow-[#e8788f]/20">
Follow
</button>
<button class="flex-1 border-2 border-[#e2e0dd] dark:border-[#2a2825] text-[#1c1a17] dark:text-[#f6f4ef] font-semibold py-3 rounded-xl hover:bg-[#ecebe8] dark:hover:bg-[#2a2825] transition-all">
Message
</button>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-4 mt-6">
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-[#ecebe8] dark:bg-[#2a2825] text-[#6b6661] dark:text-[#94908a] hover:bg-[#e15f80]/20 dark:hover:bg-[#e8788f]/20 hover:text-[#e15f80] dark:hover:text-[#e8788f] transition-all">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="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"/></svg>
</a>
</div>
</div>
</div>
</div>
</div></template>
<meta data-field="design-tokens" content="{"fonts":[{"role":"heading","family":"Inter","weights":[400,600,700],"category":"sans-serif"},{"role":"body","family":"Source Sans Pro","weights":[400,600],"category":"sans-serif"},{"role":"mono","family":"Fira Code","weights":[400],"category":"monospace"}],"colors":[{"name":"Primary","value":"#2563EB","group":"Brand"},{"name":"Secondary","value":"#7C3AED","group":"Brand"},{"name":"Accent","value":"#F59E0B","group":"Brand"},{"name":"Gray","value":"#F9FAFB","group":"Neutral"},{"name":"Gray","value":"#E5E7EB","group":"Neutral"},{"name":"Gray","value":"#9CA3AF","group":"Neutral"},{"name":"Gray","value":"#374151","group":"Neutral"},{"name":"Gray","value":"#111827","group":"Neutral"}],"spacing":{"unit":"4px","scale":["4","8","12","16","24","32","48","64"]},"radii":[{"name":"sm","value":"4px"},{"name":"md","value":"8px"},{"name":"lg","value":"12px"},{"name":"full","value":"9999px"}]}" />
</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" %}
---
{% /juxtapose %}<section data-rune="juxtapose" data-rune-fields="{"variant":"toggle","orientation":"vertical","position":"50","duration":"1000"}">
<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
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 %}
---
{% /juxtapose %}<section data-rune="juxtapose" data-rune-fields="{"variant":"fade","orientation":"vertical","position":"50","duration":"800"}">
<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
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 %}
---
{% /juxtapose %}<section data-rune="juxtapose" data-rune-fields="{"variant":"auto","orientation":"vertical","position":"50","duration":"2000"}">
<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
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" %}
---
{% /juxtapose %}<section data-rune="juxtapose" data-rune-fields="{"variant":"slider","orientation":"horizontal","position":"50","duration":"1000"}">
<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
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
| Markdown | Interpretation |
|---|---|
--- | Panel separator |
| Content between separators | Panel body |
Attributes
| Attribute | Type | Required | Description |
|---|---|---|---|
variant | "slider" | "toggle" | "fade" | "auto" | — | Interaction mode: slider, toggle, fade, or auto |
orientation | "horizontal" | "vertical" | — | Divider axis for slider/auto variants (horizontal or vertical) |
position | number | — | Initial slider position as a percentage (0-100) |
duration | number | — | Animation duration in milliseconds (fade/auto variants) |
labels | string | — | Comma-separated custom labels for the two panels |
Universal attributes
bg
The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.
| Attribute | Type | Required | Description |
|---|---|---|---|
bg | string | — | Background preset applied to this block |
bg-from | string | — | Gradient start colour — a semantic token name (→ var(--rf-color-*)) |
bg-gradient | "to-t" | "to-b" | "to-l" | "to-r" | "to-tr" | "to-br" | "to-bl" | "to-tl" | — | Gradient direction (bounded named set) |
bg-gradient-type | "linear" | "radial" | "conic" | — | Gradient type |
bg-to | string | — | Gradient end colour — a semantic token name |
bg-via | string | — | Optional middle gradient stop — a semantic token name |
scrim | "top" | "bottom" | "left" | "right" | "none" | — | Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim |
scrim-blur | "none" | "sm" | "md" | "lg" | — | Frost scrim blur amount |
scrim-strength | "sm" | "md" | "lg" | — | Gradient scrim strength |
scrim-tone | "dark" | "light" | — | Whether the scrim darkens (for light text) or lightens (for dark text) |
scrim-type | "gradient" | "frost" | — | Scrim treatment: gradient (default) or frost (backdrop blur) |
elevation
The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.
| Attribute | Type | Required | Description |
|---|---|---|---|
elevation | "sunken" | "flush" | "flat" | "raised" | "floating" | "overlay" | "none" | "sm" | "md" | "lg" | — | Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases |
inset
Internal padding override.
| Attribute | Type | Required | Description |
|---|---|---|---|
inset | "flush" | "tight" | "default" | "loose" | "breathe" | — | Inner padding of this block |
motion
Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.
| Attribute | Type | Required | Description |
|---|---|---|---|
reveal | "none" | "fade" | "slide" | "scale" | "blur" | — | Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography |
stagger | boolean | — | Cascade this block's items in as it reveals (no-op on single-child runes) |
spacing
Block-level rhythm override.
| Attribute | Type | Required | Description |
|---|---|---|---|
spacing | "flush" | "tight" | "default" | "loose" | "breathe" | — | Vertical spacing above and below this block |
substrate
Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.
| Attribute | Type | Required | Description |
|---|---|---|---|
substrate | "dots" | "grid" | "lines" | "cross" | "checker" | "none" | — | Generated surface pattern |
substrate-fill | "inherit" | "inset" | — | Surface fill the pattern sits on (full colour stays with tint) |
substrate-opacity | "sm" | "md" | "lg" | — | Pattern ink strength |
substrate-size | "sm" | "md" | "lg" | — | Pattern cell size |
substrate-target | "self" | "media" | — | Which surface the pattern fills (overrides the rune/theme default) |
tint
Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.
| Attribute | Type | Required | Description |
|---|---|---|---|
tint | string | — | Color tint preset applied to this block |
tint-mode | "auto" | "dark" | "light" | — | Whether the tint adapts to auto, dark, or light mode |
width
The track a block rune occupies.
| Attribute | Type | Required | Description |
|---|---|---|---|
width | "compact" | "narrow" | "content" | "wide" | "full" | — | Maximum width constraint for this block |
| Not available | Why |
|---|---|
| dropcap, reading | this rune declares no prose body |
| frame | this rune declares neither a `frameTarget` nor a media section |
| prominence | this rune has no page-section header |