cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

            
              <div class="tabs">
  <input type="radio" name="tabs" id="toggle-apples" checked="checked" />
  <label for="toggle-apples">
        <svg viewBox="0 0 61 78">
            <g fill="none" fill-rule="evenodd">
                <path d="M31.725 10.18c.04.076.078.152.112.228-.034-.076-.072-.152-.112-.228M31.92 10.605c.03.08.06.158.085.237-.025-.08-.054-.158-.085-.237M32.055 11.03c.02.08.04.162.053.244-.013-.082-.033-.163-.053-.245M31.468 9.753c.048.072.093.145.137.217-.044-.072-.088-.145-.137-.217M30.934 9.08c-.055-.06-.108-.122-.166-.183.058.06.11.122.166.183M32.113 11.316c-.116-.1-.235-.2-.362-.3-2.863-2.277-8.516-4.427-11.63-4.427-.66 0-1.01.102-1.14.164-.106.42.132 1.88 1.466 4.28 1.206 1.624 2.54 3.077 3.76 4.045 1.21.96 2.35 1.45 3.388 1.45 1.52 0 2.686-1.068 3.397-1.964.806-1.013 1.196-1.996 1.16-2.924-.004-.108-.02-.217-.037-.326M20.34 10.89c-.194-.266-.385-.537-.572-.81.187.274.377.544.573.81M19.563 9.777c-.244-.367-.48-.737-.702-1.11.223.373.46.743.703 1.11M30.324 8.468c.054.05.103.1.155.148-.053-.05-.102-.1-.156-.148M31.15 9.325c.054.068.104.136.155.204-.05-.07-.1-.137-.156-.205" fill="#74AF88" />
                <path d="M36.62 24.143c.354-.044.71-.083 1.066-.11-.357.027-.712.066-1.066.11M16.526 31.09c-5.96 1.912-5.75 8.265-5.737 8.535.04.928-.677 1.717-1.604 1.762-.028.002-.056.002-.083.002-.89 0-1.635-.695-1.682-1.595-.166-3.172 1.307-9.745 8.076-11.916.887-.286 1.837.203 2.12 1.09.285.886-.203 1.836-1.09 2.12zm39.477 4.152c-1.908-6.412-6.813-9.785-12.312-10.877 3.52.702 6.796 2.34 9.198 5.11-4.26-3.21-10.074-4.01-15.34-3.052-1.552.283-3.06.713-4.44 1.366-.238.112-.688.336-1.376 0-1.37-.673-2.886-1.084-4.44-1.367-8.235-1.5-17.825 1.29-20.685 10.902-.682 2.29-2.756 9.262 3.178 17.58 1.858 2.602 3.082 5.698 4.266 8.69 1.275 3.22 2.48 6.253 4.356 8.536-2.255-1.565-3.71-3.944-4.958-6.688 2.648 5.834 6.234 10.187 16.45 8.4.194-.034.386.158.57.158h.01c12.408 1 15.036-4.633 18.08-12.328 1.184-2.993 2.408-6.168 4.266-8.772 5.935-8.316 3.86-15.367 3.18-17.658zM37.72 24.03c.352-.027.706-.044 1.06-.056-.354.012-.708.03-1.06.056M35.316 24.34c.348-.063.7-.116 1.052-.164-.353.048-.704.1-1.052.164M38.99 23.968c.748-.016 1.495.003 2.24.06-.745-.056-1.492-.076-2.24-.06M41.36 24.04c.776.064 1.548.17 2.308.32-.76-.15-1.532-.256-2.31-.32" fill="#B45846" />
                <path d="M13.445 65.435c-.108-.237-.214-.478-.32-.72.106.243.212.483.32.72M13.092 64.637c-.095-.22-.19-.443-.283-.668.093.224.187.446.282.667M12.76 63.854c-.09-.216-.178-.433-.266-.652.088.22.177.436.267.652M12.44 63.072l-.27-.676.27.676M12.128 62.292l-.31-.78.31.78" fill="#B45846" />
                <path d="M15.496 27.88c-6.77 2.17-8.242 8.743-8.075 11.915.048.9.792 1.594 1.683 1.594.027 0 .055 0 .083-.003.927-.045 1.644-.834 1.603-1.762-.013-.27-.224-6.623 5.736-8.535.887-.284 1.375-1.234 1.09-2.12-.283-.887-1.233-1.375-2.12-1.09" fill="#2A231B" />
                <path d="M18.86 8.667c-1.645-2.766-1.93-4.434-1.813-4.89.128-.06.478-.164 1.138-.164 3.115 0 8.768 2.15 11.632 4.426 1.502 1.192 2.287 2.405 2.334 3.603.036.927-.354 1.91-1.16 2.923-.71.896-1.877 1.963-3.396 1.963-1.038 0-2.178-.49-3.388-1.45-1.79-1.423-3.838-3.88-5.345-6.413zM52.825 52.82c-1.858 2.604-3.082 5.7-4.266 8.693-3.044 7.695-5.672 14.34-18.08 12.17h-.01c-.184-.032-.376-.035-.57 0-12.404 2.17-15.035-4.475-18.08-12.17-1.182-2.993-2.407-6.09-4.264-8.692-5.935-8.316-3.86-15.287-3.18-17.578 2.86-9.612 12.45-12.4 20.687-10.902 1.554.283 3.07.694 4.44 1.366.69.337 1.138.113 1.377 0 1.38-.653 2.887-1.083 4.44-1.366 8.235-1.5 17.826 1.29 20.686 10.902.68 2.29 2.755 9.262-3.18 17.58zm6.41-18.54c-1.52-5.114-4.8-9.062-9.482-11.416-4.31-2.17-9.653-2.823-15.04-1.84-.833.15-1.65.347-2.45.585.67-3.33 2.82-9.78 9.642-14.068.79-.495 1.026-1.536.53-2.325-.494-.788-1.536-1.026-2.324-.53-2.087 1.31-3.793 2.79-5.192 4.33-.584-1.283-1.587-2.493-3.004-3.62C28.454 2.652 22.04.242 18.184.242c-1.76 0-3.034.482-3.788 1.43-1.322 1.666-.874 4.463 1.33 8.316 1.724 3.013 4.17 5.976 6.382 7.734 1.822 1.447 3.667 2.18 5.486 2.18.554 0 1.102-.07 1.64-.208-.207.81-.347 1.533-.442 2.13-1.013-.336-2.058-.605-3.126-.8-5.388-.98-10.73-.327-15.04 1.842-4.683 2.354-7.96 6.302-9.483 11.417-.798 2.682-3.226 10.842 3.665 20.5 1.62 2.268 2.715 5.04 3.876 7.974 2.75 6.954 5.82 14.723 16.764 14.722 1.437 0 3.014-.136 4.74-.424 1.728.288 3.303.424 4.74.424 10.942 0 14.015-7.77 16.765-14.722 1.16-2.934 2.257-5.706 3.876-7.974 6.89-9.658 4.463-17.818 3.665-20.5z" fill="#2A231B" />
            </g>
        </svg>
        <span class="text-title">Apples</span>
    </label>
  <input type="radio" name="tabs" id="toggle-bananas" />
  <label for="toggle-bananas">
        <svg viewBox="0 0 67 66" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" fill-rule="evenodd">
                <path d="M45.548 47.4c-4.787 0-9.427-.867-13.83-2.592-3.28-1.284-6.424-3.046-9.415-5.268 5.712 6.44 13.898 10.414 24.46 11.87 4.04-.448 9.17-2.43 14.477-5.603.113-.068 1.788-.912 2.11-2.357-2.677 1.254-8.138 3.388-15.08 3.86-.913.06-1.82.09-2.722.09" fill="#EBC75C" />
                <path d="M51.928 58.572c-.352 0-.718-.004-1.09-.01.08 0 .16-.003.24-.005-.444.01-.906.015-1.392.015-2.214 0-4.845-.104-7.707-.42-10.752-1.192-19.58-4.89-25.53-10.694-6.592-6.43-9.83-15.407-9.674-26.726-.005.4-.01.8-.008 1.194C3.733 32.658 4.53 46.86 16.88 55.768c5.794 4.18 12.955 6.39 21.298 6.59 4.717-.09 9.61-.796 14.225-2.074 1.487-.412 2.13-1.116 2.39-1.77-.847.034-1.807.058-2.865.058" fill="#EBC75C" />
                <path d="M54.413 58.408c.152-.01.297-.02.433-.032-.136.01-.282.022-.433.032M6.785 20.136c.016-.643.043-1.295.08-1.953-.036.658-.065 1.31-.08 1.953M7.088 15.293c-.077.76-.134 1.51-.183 2.25.05-.742.106-1.49.183-2.25M51.346 58.552l.447-.012-.447.012M53.94 58.44l.314-.02-.315.02M52.004 58.533c.205-.006.405-.014.6-.022-.195.01-.395.017-.6.023M52.793 58.502c.134-.006.266-.012.394-.02-.128.008-.26.014-.394.02M53.405 58.472l.326-.02-.325.02M5.556 11.752c-.108-.07-.22-.148-.328-.24.11.093.22.17.328.24M14.48 8.03L6.797 6.662 5.99 11.19c-.036.27-.054.58-.058.828.336.16.59.27.595.27l4.065.67c.485.073 2.824.213 3.567-3.093l.805-4.54-.484 2.705M5.928 11.963c-.096-.046-.2-.103-.304-.167.106.064.208.12.304.167M61.198 41.16c.113-.047.228-.096.333-.143-.104.047-.22.096-.332.144M60.602 41.413c.137-.057.274-.113.403-.168l-.403.168M59.53 41.77l-.027.006c-15 2.998-27.346.704-36.695-6.815-3.24-2.604-5.748-5.565-7.68-8.442.335 1.093.728 2.22 1.2 3.365 8.984 10.418 19.66 15.288 31.74 14.47 4.866-.33 8.97-1.555 11.746-2.626-.14.015-.242.034-.284.043M59.994 41.656c.144-.056.29-.113.426-.168l-.426.168M14.955 25.918c-.078-.27-.16-.544-.23-.81.07.267.152.54.23.81" fill="#EBC75C" />
                <path d="M51.95 54.882c-1.83-.102-3.61-.27-5.336-.504-.006 0-.012 0-.02-.002l-.066-.01-.06-.008c-7.48-1.03-13.934-3.29-19.238-6.745-5.3-3.455-9.455-8.093-12.352-13.785-.438-.86-.83-1.717-1.188-2.564l-.007-.017c-1.21-2.874-1.975-5.64-2.462-8.065.063.31.13.626.2.947.475 8.89 3.387 16 8.71 21.198 6.896 6.733 16.705 9.083 23.72 9.87 2.402.268 4.648.377 6.608.4-.284.003-.576.005-.876.005 1.705 0 3.16-.06 4.26-.13-.77-.425-1.73-.57-1.89-.59M49.535 55.602c-.262 0-.53-.002-.804-.006.274.004.543.006.805.006M47.576 55.57c-.28-.007-.566-.017-.856-.03.29.013.575.023.856.03M48.517 55.593l-.705-.015.705.015M44.324 55.395l-.723-.06.724.06M43.278 55.305c-.346-.033-.695-.068-1.048-.108.353.04.702.075 1.048.108M46.63 55.537c-.32-.014-.644-.03-.973-.05.33.02.654.036.973.05M45.4 55.47c-.244-.014-.49-.03-.74-.05.25.02.496.036.74.05M10.438 16.986c-.01-.188-.017-.365-.023-.533.006.168.013.345.023.533M10.706 20.023c-.032-.256-.062-.508-.088-.75.026.242.056.494.088.75M10.988 21.93c-.044-.26-.086-.518-.124-.77.038.252.08.51.124.77M10.84 21.007c-.04-.275-.077-.542-.11-.803.033.26.07.528.11.803M11.18 22.97c-.06-.3-.115-.596-.166-.885.05.29.106.585.165.886M10.615 19.25c-.027-.25-.05-.49-.07-.724.02.234.043.473.07.724M10.412 16.35c-.005-.164-.01-.323-.01-.467 0 .144.005.303.01.468M10.475 17.624c-.013-.19-.024-.372-.033-.546.01.175.02.356.033.546M10.532 18.374c-.02-.224-.037-.442-.05-.65.013.21.03.426.05.65" fill="#EBC75C" />
                <path d="M53.843 55.472c-2.474.16-6.726.273-11.613-.275-7.015-.786-16.824-3.136-23.72-9.87-6.89-6.727-9.745-16.656-8.495-29.513l.386.07c.043 2.6.478 8.693 3.283 15.363l.007.017c.357.847.75 1.704 1.188 2.564 2.897 5.692 7.053 10.33 12.352 13.785 5.304 3.456 11.758 5.716 19.24 6.745l.058.008.067.01.02.002c1.725.233 3.504.402 5.336.504.163.022 1.123.166 1.893.59zm5.936-14.948c.168-.035 1.266-.236 2.227.277-2.476 1.147-7.556 3.12-13.94 3.552-12.078.82-22.755-4.05-31.74-14.47-.888-2.158-1.513-4.257-1.95-6.172 2.038 3.347 4.85 6.925 8.68 10.005 9.35 7.52 21.696 9.813 36.695 6.815l.027-.006zM4.244 8.074l.806-4.527 9.915 1.765-.806 4.527c-.744 3.305-3.083 3.138-3.568 3.066l-4.065-.723c-.007 0-.686-.148-1.3-.67-.856-.733-1.187-1.89-.982-3.44zm48.158 52.21c-4.94 1.37-10.207 2.092-15.228 2.092-8.876 0-16.46-2.223-22.537-6.608C-.5 44.848 1.718 25.978 7.078 15.29l.01.003c-1.4 13.914 1.746 24.736 9.363 32.165C22.4 53.262 31.23 56.96 41.98 58.15c2.86.318 5.492.422 7.706.422 2.186 0 3.964-.1 5.16-.196-.223.692-.852 1.467-2.443 1.908zm8.837-14.477c-5.306 3.172-10.437 5.155-14.476 5.602-10.563-1.456-18.75-5.43-24.46-11.87 2.99 2.222 6.135 3.984 9.414 5.268 4.403 1.725 9.043 2.593 13.83 2.593.902 0 1.81-.03 2.72-.09 6.944-.472 12.405-2.606 15.083-3.86-.322 1.445-1.997 2.29-2.11 2.357zm4.47-5.257c-1.596-3.113-4.97-3.275-6.556-2.923C28.292 43.787 17.172 24.97 13.57 15.31c1.478-.707 2.892-2.154 3.49-4.86.004-.02.008-.04.01-.06l1.073-6.018c.07-.386-.02-.785-.244-1.107-.226-.322-.57-.542-.956-.61L4.112.37c-.804-.144-1.575.393-1.718 1.2L1.322 7.585l-.01.06c-.505 3.716 1.187 5.786 2.89 6.772-3.233 6.62-4.673 14.36-3.963 21.49.92 9.253 5.3 16.95 12.664 22.263 6.594 4.758 14.76 7.17 24.27 7.17 5.286 0 10.825-.76 16.02-2.2 4.705-1.303 4.938-5.063 4.602-6.618-.162-2.175-1.76-3.422-3.388-4.06 2.673-1.02 5.5-2.405 8.353-4.11.095-.058.165-.1.21-.125 4.356-2.508 3.47-6.356 2.74-7.677z" fill="#2A231B" />
            </g>
        </svg>
        <span class="text-title">Bananas</span>
    </label>
  <input type="radio" name="tabs" id="toggle-cherries" />
  <label for="toggle-cherries">
        <svg viewBox="0 0 57 78" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" fill-rule="evenodd">
                <path d="M20.363 58.765c.113.02.224.042.334.07-.11-.028-.22-.05-.334-.07M10.935 60.51c.043.062.09.12.128.184-.04-.064-.085-.122-.128-.183M10.564 60.044c.056.06.114.12.167.185-.052-.066-.11-.125-.166-.186M10.346 59.818c-.06-.058-.125-.11-.19-.165.064.054.13.107.19.165M9.71 59.327c.07.043.137.088.204.136-.067-.048-.135-.093-.204-.136M20.843 58.875c.115.035.23.076.34.12-.11-.044-.224-.085-.34-.12M23.17 60.7c-.177-.29-.386-.552-.62-.788.234.236.443.5.62.788M19.736 58.71c.164 0 .325.012.484.032-.16-.02-.32-.033-.484-.033M9.23 59.065c.07.032.14.07.21.105-.07-.036-.14-.073-.21-.105M21.285 59.036c.147.064.29.137.43.218-.14-.08-.283-.154-.43-.218M21.723 59.26c.134.08.262.168.385.263-.124-.095-.25-.183-.385-.263M22.185 59.585c.104.082.204.17.3.263-.096-.093-.196-.18-.3-.263M5.314 69.88l-.113-.184c.04.062.076.123.114.184M6.43 71.346c.035.04.07.084.108.124-.038-.04-.073-.083-.11-.124M4.78 68.944l-.032-.058c.01.02.022.038.03.058M5.932 70.754c-.04-.052-.082-.102-.12-.155.038.052.08.102.12.154" fill="#B45846" />
                <path d="M23.248 60.7c-.53-.268-1.16-.422-1.783-.422-1.572 0-3.047.984-3.727 2.506-.247.554-.794.922-1.4.952-.652.033-1.26.033-1.912 0-.605-.03-1.145-.398-1.393-.952-.098-.22-.215-.426-.343-.622.014 0 .027.004.042.005-.606-.03-1.143-.398-1.39-.952-.08-.18-.174-.35-.274-.514-.538-.27-1.24-.422-1.853-.422-2.264 0-4.215 1.974-4.215 4.4v.543c0 2.914 1.158 5.564 2.866 7.535 1.63 1.205 3.727 1.912 5.843 1.912 5.6 0 10.29-4.94 10.29-11.015v-.544c0-.89-.327-1.716-.752-2.408M7.32 72.225l-.172-.154c.057.053.115.104.173.155M3.96 66.82c.013.05.024.1.038.148-.014-.05-.025-.1-.04-.148M4.295 67.844c.025.067.052.133.078.2-.026-.067-.053-.133-.078-.2M8.184 58.75c.06.01.12.027.18.04-.06-.013-.12-.03-.18-.04M3.573 64.658c.006.07.01.14.018.21-.006-.07-.01-.14-.017-.21M3.725 65.817c.01.054.023.108.034.162-.012-.055-.025-.11-.035-.163M8.718 58.872c.07.02.14.047.208.072-.07-.025-.137-.05-.208-.072M40.853 60.514c.04.06.087.116.126.18-.04-.064-.086-.12-.127-.18M50.278 58.765c.113.02.224.042.334.07-.11-.028-.22-.05-.334-.07M40.48 60.045c.056.06.114.12.166.184-.052-.066-.11-.124-.166-.185M40.26 59.817c-.06-.057-.124-.11-.187-.163.063.053.127.106.188.163M50.758 58.875c.116.035.23.076.34.12-.11-.044-.224-.085-.34-.12M49.652 58.71c.164 0 .324.012.483.032-.16-.02-.32-.033-.483-.033M52.785 60.27c.108.137.208.28.3.43-.092-.15-.192-.293-.3-.43M51.2 59.036c.147.064.29.136.43.218-.14-.082-.283-.154-.43-.218M39.626 59.327c.07.043.137.088.203.136-.067-.048-.135-.093-.204-.136M52.785 60.27c-.1-.126-.207-.244-.32-.358.113.114.22.232.32.358M51.64 59.262c.133.08.26.167.384.26-.124-.093-.25-.18-.384-.26M52.1 59.584c.104.083.204.17.3.264-.096-.093-.196-.18-.3-.264M38.634 58.872c.07.02.138.047.207.072-.068-.025-.136-.05-.206-.072M35.23 69.88c-.04-.06-.076-.122-.113-.183l.112.183M34.695 68.944l-.032-.058.032.058M35.847 70.754c-.04-.052-.082-.102-.12-.155.038.052.08.102.12.154M37.236 72.225c-.058-.05-.116-.102-.173-.154.057.053.115.104.173.155M39.145 59.065c.07.032.14.07.21.105-.07-.036-.14-.073-.21-.105" fill="#B45846" />
                <path d="M53.205 60.7c-.53-.268-1.18-.422-1.803-.422-1.573 0-3.058.984-3.738 2.506-.247.554-.8.922-1.405.952-.654.033-1.264.033-1.916 0-.606-.03-1.147-.398-1.394-.952-.098-.22-.216-.426-.344-.622.014 0 .027.004.04.005-.604-.03-1.142-.398-1.39-.952-.08-.18-.172-.35-.273-.514-.538-.27-1.197-.422-1.81-.422-2.265 0-4.173 1.974-4.173 4.4v.543c0 2.913 1.115 5.563 2.824 7.535 1.628 1.205 3.748 1.912 5.864 1.912C49.29 74.667 54 69.727 54 63.652v-.544c0-.89-.37-1.716-.795-2.408M36.344 71.346c.037.04.072.084.11.124-.038-.04-.073-.083-.11-.124M34.21 67.844c.025.067.052.132.078.2-.026-.067-.053-.133-.078-.2M38.1 58.75c.06.01.12.027.18.04-.06-.013-.12-.03-.18-.04M33.64 65.816c.01.055.023.11.034.164-.01-.055-.024-.11-.034-.164M33.488 64.658c.006.07.01.14.018.21l-.018-.21M33.874 66.82c.013.05.025.1.04.148-.015-.05-.027-.1-.04-.148" fill="#B45846" />
                <path d="M31.952 15.374c-.23.005-.453.01-.654.008.2 0 .423-.003.654-.008M51.573 3.99c-.16.262-.337.543-.53.84.192-.296.37-.58.53-.84M32.842 15.34c-.252.013-.49.023-.718.03.228-.007.466-.017.718-.03M50.41 5.753c.226-.32.437-.628.63-.923-.193.295-.404.605-.63.923M33.75 15.275c-.297.026-.585.047-.857.062.273-.015.56-.036.857-.062M42.178 8.332c-3.315 1.862-5.746 4.59-7.342 6.83 2.457-.31 5.45-1.015 8.23-2.576 3.314-1.863 5.746-4.592 7.342-6.83-2.456.306-5.453 1.015-8.23 2.576M34.75 15.17c-.286.036-.565.065-.836.09.27-.025.55-.054.837-.09" fill="#74AF88" />
                <path d="M43.6 74.667c-5.6 0-10.16-4.94-10.16-11.015v-.544c0-2.426 1.844-4.4 4.11-4.4 1.57 0 3.026.984 3.706 2.507.247.554.785.922 1.39.952.652.033 1.255.033 1.908 0 .605-.03 1.143-.398 1.39-.952.68-1.523 2.135-2.506 3.708-2.506 2.265 0 4.107 1.972 4.107 4.398v.544c0 6.074-4.558 11.015-10.16 11.015zM51.573 3.99c-1.44 2.373-4.247 6.2-8.508 8.596-4.363 2.452-9.26 2.798-11.767 2.796 1.438-2.374 4.247-6.202 8.508-8.597C44.136 4.352 49 3.988 51.514 3.988h.06zM23.843 63.65c0 6.074-4.556 11.015-10.158 11.015-5.602 0-10.16-4.94-10.16-11.015v-.544c0-2.426 1.843-4.4 4.108-4.4 1.573 0 3.028.984 3.708 2.507.248.554.786.922 1.39.952.654.033 1.256.033 1.908 0 .606-.03 1.143-.398 1.39-.952.68-1.523 2.136-2.506 3.708-2.506 2.265 0 4.108 1.972 4.108 4.398v.544zm25.81-8.166c-1.71 0-3.33.628-4.615 1.708-.213-2.548-.69-6.315-1.75-10.554-2.447-9.788-6.933-17.544-13-22.5v-5.554c.322.01.678.02 1.067.02 3.457 0 8.568-.558 13.29-3.21 7.43-4.177 10.88-11.906 11.023-12.233.203-.463.177-.995-.07-1.436-.25-.44-.69-.74-1.19-.807-.047-.007-1.16-.154-2.894-.154-3.456 0-8.567.557-13.287 3.21-3.515 1.975-6.134 4.742-7.938 7.147V6.306c0-.89-.723-1.61-1.613-1.61s-1.61.72-1.61 1.61V24.08c-6.103 4.954-10.614 12.734-13.07 22.56-1.062 4.24-1.537 8.007-1.75 10.554-1.284-1.08-2.907-1.708-4.614-1.708-4.042 0-7.33 3.42-7.33 7.622v.544c0 7.85 6.003 14.238 13.382 14.238 7.378 0 13.38-6.387 13.38-14.238v-.544c0-4.203-3.287-7.622-7.33-7.622-1.534 0-3 .507-4.215 1.395.65-6.828 3.192-21.49 13.122-29.917 9.91 8.412 12.463 23.08 13.12 29.915-1.213-.886-2.68-1.392-4.213-1.392-4.043 0-7.33 3.42-7.33 7.622v.544c0 7.85 6 14.238 13.38 14.238 7.38 0 13.38-6.387 13.38-14.238v-.544c0-4.203-3.286-7.622-7.328-7.622z" fill="#2A231B" />
            </g>
        </svg>
        <span class="text-title">Cherries</span>
    </label>
  <input type="radio" name="tabs" id="toggle-oranges" />
  <label for="toggle-oranges">
        <svg viewBox="0 0 55 79" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" fill-rule="evenodd">
                <path d="M33.21 29.3c.16-.07.334-.132.514-.19-.18.058-.352.12-.515.19M31.83 30.13c.1-.08.208-.162.325-.244-.117.082-.226.164-.326.245M33.837 29.077c.192-.056.392-.108.604-.147-.21.04-.41.09-.603.147M31.52 30.4c.076-.07.16-.145.25-.22-.09.075-.174.15-.25.22" fill="#D9803F" />
                <path d="M34.44 28.93c.235.34.403.6.533.82-.146-.27-.32-.547-.532-.82M41.075 32.03c.143.1.285.205.426.31-.14-.105-.282-.21-.425-.31M42.242 32.92c.13.106.263.21.39.318-.127-.11-.26-.212-.39-.318M32.677 29.56c.136-.076.282-.147.435-.216-.153.07-.3.14-.435.216M39.885 31.23c.13.08.256.166.384.25-.13-.084-.256-.17-.385-.25M44.628 35.14c.144.154.284.313.425.47-.14-.157-.28-.316-.425-.47M45.56 36.2c.14.17.28.34.415.513-.136-.173-.275-.343-.416-.512M32.24 29.83c.124-.085.255-.17.398-.25-.143.08-.274.165-.4.25M43.965 34.464c-.108-.107-.21-.217-.32-.322.11.105.212.215.32.322M28.01 30.107c.002-.088.01-.177.025-.265-.015.088-.023.177-.024.265M31.49 30.427c-.083.08-.154.152-.217.22.063-.068.135-.14.217-.22M28.144 29.485c.038-.09.08-.176.136-.258-.055.083-.098.17-.136.258M28.052 29.77c.016-.07.036-.14.062-.208-.026.07-.046.138-.062.21M3.846 53.787c-.03-.277-.05-.557-.07-.836.02.28.04.56.07.837M8.154 65.058c-.164-.228-.327-.458-.483-.692.157.234.32.464.484.692M11.547 68.853c-.282-.254-.557-.515-.827-.782.27.268.545.53.827.783M8.954 66.11c-.206-.255-.41-.514-.605-.778.195.264.398.523.604.78M6.82 62.98c-.123-.214-.244-.43-.36-.647.116.218.237.433.36.647M7.452 64.025c-.14-.218-.278-.436-.41-.66.132.224.27.442.41.66M28.11 30.675c-.023-.062-.042-.125-.057-.19.015.065.034.128.057.19M18.38 48.254c-.3.3-.714.473-1.14.473-.422 0-.84-.172-1.138-.473-.3-.3-.473-.716-.473-1.14 0-.424.17-.84.472-1.14.3-.3.716-.47 1.14-.47.422 0 .84.17 1.138.47.3.3.472.716.472 1.14 0 .424-.17.84-.472 1.14zm0 8.34c-.3.3-.714.472-1.14.472-.422 0-.84-.172-1.138-.473-.3-.3-.473-.715-.473-1.14 0-.424.17-.84.472-1.14.3-.298.716-.47 1.14-.47.422 0 .84.172 1.138.47.3.3.472.716.472 1.14 0 .425-.17.84-.472 1.14zm-1.418 9.204c-.3.3-.716.47-1.14.47-.425 0-.84-.17-1.14-.47-.3-.3-.473-.717-.473-1.14 0-.424.17-.84.472-1.14.3-.3.715-.472 1.14-.472.424 0 .84.172 1.14.472.3.3.47.716.47 1.14 0 .423-.17.84-.47 1.14zm-4.4-21.128c-.3.298-.714.47-1.14.47-.425 0-.84-.172-1.14-.47-.3-.3-.47-.716-.47-1.14 0-.424.17-.84.47-1.14.3-.3.717-.473 1.14-.473.424 0 .838.172 1.14.473.3.3.472.716.472 1.14 0 .424-.172.84-.473 1.14zm0 15.752c-.3.3-.716.473-1.14.473-.423 0-.84-.172-1.14-.473-.3-.298-.47-.715-.47-1.14 0-.424.17-.84.47-1.137.3-.3.717-.473 1.14-.473.424 0 .84.172 1.14.473.3.298.472.713.472 1.138 0 .424-.172.84-.473 1.14zm-4.124-7.858c-.3-.3-.47-.715-.47-1.14 0-.424.17-.84.47-1.14.3-.298.715-.472 1.138-.472.426 0 .84.174 1.142.472.3.3.472.716.472 1.14 0 .425-.172.84-.472 1.14-.3.3-.716.473-1.142.473-.423 0-.837-.174-1.138-.473zm37.652-15.7c-1.387-1.238-5.03-4.115-7.214-4.716-.046-.64-.04-.643-.098-.964.17 1.166.067 1.99.057 2.064-.114.805-.804 1.386-1.594 1.386-.074 0-.15-.005-.227-.016-.877-.124-1.488-.932-1.37-1.81.007-.072.092-.89-.214-1.943l.1.407c-.316-.158-1.933-.644-4.443-.416.04-.05.095-.11.155-.177-.176.19-.273.325-.287.345-.31.465-.817.715-1.335.715-.308 0-.62-.09-.896-.272-.26-.173-.446-.41-.566-.674.022.05.044.097.07.144-5.072.45-9.69 2.507-13.336 5.66-.074.05-.145.11-.21.173.3-.298.715-.47 1.14-.47.424 0 .84.172 1.14.47.3.302.472.717.472 1.14 0 .425-.173.84-.472 1.14-.3.3-.716.472-1.14.472-.425 0-.84-.172-1.14-.47-.3-.302-.473-.717-.473-1.142 0-.423.17-.838.472-1.14-.02.02-.036.04-.054.06-4.87 4.336-7.942 10.65-7.942 17.666 0 5.405 1.824 10.39 4.886 14.378 4.19 3.767 9.728 6.064 15.793 6.064 13.043 0 23.653-10.61 23.653-23.654 0-5.425-1.844-10.423-4.928-14.42zM28.033 30.38c-.01-.062-.015-.123-.018-.186.003.063.01.124.018.186M4.234 56.22c-.05-.235-.093-.47-.136-.707.043.236.086.472.136.706M4.52 57.405c-.06-.227-.116-.455-.17-.684.054.23.11.458.17.685M4.01 55.013c-.04-.247-.072-.497-.103-.747.03.25.062.5.102.747M9.073 66.262c.51.62 1.05 1.215 1.618 1.78-.568-.565-1.107-1.16-1.617-1.78M6.244 61.913c-.107-.213-.213-.427-.314-.644.1.216.207.43.314.643M3.746 52.545c-.022-.418-.034-.838-.034-1.26 0 .422.012.842.034 1.26M5.728 60.822c-.095-.214-.187-.43-.276-.647.09.218.18.433.276.647M5.268 59.707c-.083-.217-.163-.436-.24-.655.077.22.157.438.24.655M4.865 58.568c-.072-.22-.14-.444-.205-.668.066.224.133.447.205.668" fill="#D9803F" />
                <path d="M17.24 45.504c-.422 0-.84.17-1.138.47-.3.3-.473.716-.473 1.14 0 .424.17.84.472 1.14.3.3.716.473 1.14.473.424 0 .84-.172 1.138-.473.3-.3.472-.716.472-1.14 0-.424-.17-.84-.472-1.14-.3-.3-.716-.47-1.14-.47M17.24 53.843c-.422 0-.84.172-1.138.47-.3.3-.473.716-.473 1.14 0 .425.17.84.472 1.14.3.3.716.473 1.14.473.424 0 .84-.172 1.138-.473.3-.3.472-.715.472-1.14 0-.424-.17-.84-.472-1.14-.3-.298-.716-.47-1.14-.47M15.82 63.046c-.423 0-.837.172-1.138.472-.3.3-.473.716-.473 1.14 0 .423.17.84.472 1.14.3.3.715.47 1.14.47.424 0 .84-.17 1.14-.47.298-.3.47-.717.47-1.14 0-.424-.172-.84-.47-1.14-.3-.3-.716-.472-1.14-.472M15.82 39.522c.426 0 .84-.172 1.142-.47.298-.302.472-.717.472-1.142 0-.423-.174-.838-.472-1.14-.3-.298-.716-.47-1.14-.47-.425 0-.84.172-1.14.47-.3.302-.473.717-.473 1.14 0 .425.17.84.472 1.14.3.3.715.472 1.14.472M11.422 41.917c-.423 0-.84.172-1.14.473-.3.3-.47.716-.47 1.14 0 .424.17.84.47 1.14.3.298.715.47 1.14.47.426 0 .84-.172 1.14-.47.3-.3.472-.716.472-1.14 0-.424-.172-.84-.473-1.14-.3-.3-.714-.473-1.138-.473M11.19 51.425c0-.425-.172-.84-.472-1.14-.3-.3-.716-.473-1.142-.473-.423 0-.837.174-1.138.472-.3.3-.47.716-.47 1.14 0 .425.17.84.47 1.14.3.3.715.473 1.138.473.426 0 .84-.174 1.142-.473.3-.3.472-.715.472-1.14M11.422 57.672c-.423 0-.84.172-1.14.473-.3.298-.47.713-.47 1.138 0 .424.17.84.47 1.14.3.3.717.472 1.14.472.424 0 .84-.172 1.14-.473.3-.298.472-.715.472-1.14 0-.424-.172-.84-.473-1.137-.298-.3-.714-.473-1.138-.473" fill="#2A231B" />
                <path d="M3.712 51.284c0-13.042 10.61-23.653 23.653-23.653.777 0 1.544.04 2.302.113-.887.75-1.346 1.423-1.387 1.484-.493.74-.297 1.747.444 2.24.277.184.588.273.896.273.518 0 1.025-.25 1.335-.715.052-.075 1.198-1.68 3.486-2.095 1.42 1.82 1.215 3.765 1.202 3.88-.117.876.494 1.684 1.37 1.808.078.01.154.016.23.016.79 0 1.48-.58 1.593-1.386.012-.087.16-1.225-.18-2.744 7.36 4.014 12.363 11.824 12.363 20.78 0 13.043-10.61 23.654-23.653 23.654-13.042 0-23.653-10.61-23.653-23.654zm32.742-42.84c2.423 2.422 3.54 5.67 4.035 7.768-2.1-.496-5.348-1.612-7.772-4.036-2.775-2.775-3.976-6.244-4.36-8.093 1.848.383 5.32 1.584 8.096 4.36zm1.18 18.005c2.21-2.924 7.277-9.013 12.714-11.455.81-.364 1.312-1.18 1.04-2.028-.275-.848-1.183-1.313-2.03-1.04-2.052.663-4.01 1.826-5.807 3.215-.626-2.5-1.973-6.134-4.817-8.978-2.563-2.563-5.504-3.93-7.52-4.626-2.91-1.004-4.81-1.088-5.648-.25 0 0-.212.182-.36.547-.403 1.005-.217 2.707.608 5.1.696 2.016 2.063 4.958 4.626 7.52 2.754 2.756 6.25 4.106 8.74 4.758-2.23 2.428-3.915 4.803-4.796 6.127-2.238-.606-4.59-.932-7.02-.932C12.547 24.408.49 36.465.49 51.284c0 14.82 12.056 26.877 26.875 26.877 14.82 0 26.877-12.056 26.877-26.876 0-11.184-6.868-20.794-16.608-24.835z" fill="#2A231B" />
                <path d="M40.49 16.212c-.497-2.098-1.613-5.346-4.036-7.77-2.776-2.775-6.248-3.976-8.096-4.36.384 1.85 1.585 5.32 4.36 8.094 2.424 2.424 5.672 3.54 7.77 4.036" fill="#74AF88" />
            </g>
        </svg>
        <span class="text-title">Oranges</span>
    </label>
  <input type="radio" name="tabs" id="toggle-pears" />
  <label for="toggle-pears">
        <svg viewBox="0 0 48 80" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" fill-rule="evenodd">
                <path d="M21.517 11.028c-.008-.008-.018-.015-.027-.022.01.007.02.014.027.022M21.215 10.8l.05.035c-.017-.01-.032-.023-.05-.034M20.85 10.598l.07.034c-.024-.01-.047-.022-.07-.034M21.882 11.445l.03.05-.03-.05M21.993 11.644l.023.046-.023-.046M20.456 10.434l.02.006-.02-.006M21.704 11.215c.014.016.03.032.042.048l-.042-.048M9.09 11.42c-.12-.064-.23-.127-.335-.19.106.063.216.126.335.19M19.938 10.28l.087.022-.087-.023M10.39 12.04c-.194-.082-.378-.166-.555-.248.177.083.36.166.554.25M22.065 11.82c-.457-.167-1.037-.295-1.77-.36-.83-.076-1.857-.16-2.977-.16-3.035 0-5.485.37-6.864.77 2.168.93 5.245 1.875 7.727 2.185.478.06.923.09 1.322.09 2.43 0 2.558-1.033 2.643-1.716.004-.03.073-.378-.08-.81M9.66 11.708c-.137-.066-.27-.132-.395-.196.126.065.258.13.396.196M8.618 11.15c-.14-.086-.27-.17-.378-.25.11.08.238.164.378.25M19.32 10.156c.035.006.072.01.108.017-.036-.006-.073-.01-.11-.017" fill="#74AF88" />
                <path d="M25.924 23.617c.064.01.127.02.19.032-.063-.012-.126-.023-.19-.033M24.82 23.492l.163.01-.164-.01M3.6 60.875c-.01-.114-.02-.226-.026-.34.006.114.017.226.025.34M3.707 61.952c-.017-.128-.035-.256-.05-.386.015.13.033.258.05.386M26.975 23.84c.052.014.103.03.155.046-.052-.015-.103-.032-.155-.046M30.342 25.802c-.05-.052-.096-.106-.146-.156.05.05.097.104.146.156M31.293 27.07c.047.077.094.154.138.234-.043-.08-.09-.157-.137-.235M27.882 24.143c.032.013.066.023.098.037-.032-.014-.066-.025-.098-.037M3.866 62.95c-.025-.13-.05-.258-.07-.39.02.132.045.26.07.39M28.686 24.523c.06.033.12.064.178.098-.058-.033-.12-.064-.178-.097M30.756 26.284c.046.06.094.117.14.178l-.14-.178M29.473 25.026c.062.046.122.093.18.14-.058-.047-.118-.094-.18-.14M7.55 70.273c-.077-.08-.15-.164-.224-.247.074.083.147.166.224.247M4.074 63.894l-.09-.373.09.374M7.933 70.66c.068.067.133.136.2.2-.067-.064-.132-.133-.2-.2M38.388 47.157c-2.62-3.122-5.33-6.35-5.33-11.3 0-3.703-.51-6.494-1.594-8.487-1.374-.856-3.12-1.265-5.277-1.265-6.528 0-9.313 3.71-9.313 12.405 0 4.95-2.71 8.18-5.33 11.3-2.858 3.408-5.56 6.627-5.56 12.306 0 3.824 1.042 6.884 2.754 9.29 4.017 3.423 9.76 4.815 15.008 4.815 9.32 0 20.202-4.388 20.202-16.757 0-5.68-2.7-8.898-5.56-12.306M6.47 68.984c-.07-.093-.138-.188-.205-.283.067.096.136.19.206.284M6.994 69.648l-.22-.27.22.27M5.98 68.277c-.063-.095-.126-.19-.186-.286.06.098.123.192.185.287M4.33 64.793c-.037-.112-.07-.227-.102-.34.033.113.066.228.1.34M4.63 65.65c-.035-.09-.065-.182-.1-.273.035.09.065.184.1.274M5.51 67.507c-.048-.087-.1-.172-.146-.26.047.088.098.173.147.26M5.006 66.532l-.032-.064.032.064" fill="#EBC75C" />
                <path d="M18.703 10.08c3.906.35 3.45 2.477 3.442 2.55-.085.682-.214 1.715-2.643 1.715-.4 0-.844-.03-1.32-.09C14.6 13.808 9.778 12.04 8.24 10.9c1.164-.472 3.926-.98 7.486-.98 1.12 0 2.146.084 2.977.16zm-9.6 37.077c2.62-3.122 5.33-6.35 5.33-11.3 0-8.695 2.785-12.405 9.313-12.405 6.528 0 9.313 3.71 9.313 12.405 0 4.95 2.708 8.178 5.328 11.3 2.86 3.408 5.56 6.627 5.56 12.306 0 12.37-10.883 16.758-20.202 16.758-9.32 0-20.202-4.388-20.202-16.757 0-5.68 2.7-8.898 5.56-12.306zm31.7-2.025c-2.464-2.936-4.592-5.472-4.592-9.275 0-5.063-.938-8.78-2.87-11.362-1.818-2.43-4.51-3.815-8.018-4.127V9.874c.014-.563.058-6.61-4.393-9.324-.744-.453-1.714-.218-2.167.525-.453.743-.218 1.713.525 2.166 1.66 1.013 2.365 2.91 2.665 4.405-.773-.31-1.715-.55-2.86-.694-.954-.118-2.12-.18-3.367-.18-2.34 0-4.72.216-6.53.594-1.8.377-4.22 1.107-4.468 3.09-.22 1.776 1.428 3.303 5.19 4.807 2.514 1.007 5.604 1.84 7.872 2.123.607.075 1.183.114 1.712.114 1.075 0 1.952-.16 2.668-.422v3.294c-3.507.31-6.2 1.694-8.018 4.125-1.932 2.582-2.87 6.3-2.87 11.362 0 3.803-2.128 6.34-4.592 9.275C3.738 48.65.392 52.636.392 59.462c0 6.167 2.415 11.317 6.983 14.896 4.128 3.234 9.942 5.015 16.37 5.015 6.43 0 12.245-1.78 16.372-5.015 4.568-3.58 6.983-8.73 6.983-14.895 0-6.827-3.346-10.814-6.298-14.33z" fill="#2A231B" />
            </g>
        </svg>
        <span class="text-title">Pears</span>
    </label>
  <div class="tab tab-apples">
    <p>
      Apples are green. Or red. Or yellow. <span class="kaomoji">¯\_(ツ)_/¯</span>
    </p>
  </div>
  <div class="tab tab-bananas">
    <p>
      Bananas are usually yellow. Monkeys seem to like them.
    </p>
  </div>
  <div class="tab tab-cherries">
    <p>
      Cherries are lovely but who doesn't love bacon?
    </p>
  </div>
  <div class="tab tab-oranges">
    <p>
      Oranges are chock full of vitamin C. Batman is the best superhero. Does he eat oranges every day?
    </p>
  </div>
  <div class="tab tab-pears">
    <p>
      Soft pears beat crisp pears any day. Fish cannot fly. Birds cannot swim. That's just the way it is.
    </p>
  </div>
</div>
            
          
!
            
              // Settings
$white-rock: #EDECD5;
$rum-swizzle: #FBF9E8;
$buddha-gold: #C0970A;
$citrus: #AAC706;
$mountain-meadow: #15C68E;
$blue-green: #14A3BB;
$medium-slate-blue: #776EEF;

$tabs-list: (
  apples: $buddha-gold, 
  bananas: $citrus, 
  cherries: $mountain-meadow, 
  oranges: $blue-green, 
  pears: $medium-slate-blue
);

// General styles
@import url(https://fonts.googleapis.com/css?family=Vollkorn);
* { 
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  font-family: Vollkorn;
  height: 100%;
  padding: 2em;
  line-height: 1.5;
  max-width: 70em;
  margin-left: auto;
  margin-right: auto;
}

// Tab styling
.tabs {
  height: 100%;
}
input[name="tabs"] {
  float: left;
  opacity: 0;
  position: absolute;
}
input[name="tabs"] ~ label {
    padding: 1em;
    width: 20%;
    float: left;
    text-align: center;
    cursor: pointer;
    transition:background .3s;
    &:hover {
      background:#d9d9d9;
    }
    &:focus {
      outline: 0;
      text-shadow: 1px 1px 3px #888;
    }
}
.tab {
    height: 100%;
    display: none;
    padding: 6em 2em 2em;
}

@each $current-tab, $colour in $tabs-list {
    label[for="toggle-#{$current-tab}"] {
        border-top: 8px solid #{$colour};
        background: $rum-swizzle;
        border-left: 1px solid darken($white-rock, 20%);
        text-transform: uppercase;
    }
    #toggle-#{$current-tab}:checked ~ .tab-#{$current-tab} { 
        display:block;
        background: $white-rock;
    }
    #toggle-#{$current-tab}:checked ~ label[for="toggle-#{$current-tab}"] {
        cursor: default;
        background: $white-rock;
        color: #{$colour};
    }
}
svg {
  height: 2rem;
  width: 2rem;
  display: inline-block;
  vertical-align: middle;
}
.text-title {
  display: none;
  @media screen and (min-width: 900px) {
    display: inline-block;
    vertical-align: middle;
  }
}
.kaomoji {
  white-space: nowrap;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console