Frontend Forever

Threads Feed Simulation

About this Code

Hello reader, I am mobalti. Nice to meet you again in this free code sharing website. In this post I am going to explain about Threads Feed Simulation. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      <body>
    <div class="App block-center-center">
      <nav class="Navbar inline-center-center content-3 space-between">
        <a href="#" class="Logo">
          <svg
            width="38"
            height="38"
            viewBox="0 0 38 38"
            fill="currentColor"
            xmlns="http://www.w3.org/2000/svg"
          >
            <mask
              id="mask0_93_58"
              style="mask-type: alpha"
              maskUnits="userSpaceOnUse"
              x="0"
              y="0"
              width="38"
              height="38"
            >
              <rect width="38" height="38" />
            </mask>
            <g mask="url(#mask0_93_58)">
              <path
                d="M19 34.4375C16.865 34.4375 14.8585 34.0316 12.9808 33.2198C11.103 32.408 9.46952 31.3063 8.08046 29.9146C6.6914 28.5229 5.59115 26.8891 4.77969 25.0132C3.96823 23.1373 3.5625 21.1329 3.5625 19C3.5625 16.865 3.9684 14.8585 4.7802 12.9808C5.592 11.103 6.69374 9.46952 8.08541 8.08046C9.47708 6.6914 11.1109 5.59115 12.9868 4.77969C14.8627 3.96823 16.8671 3.5625 19 3.5625C21.135 3.5625 23.1415 3.9684 25.0192 4.7802C26.897 5.592 28.5305 6.69374 29.9195 8.08541C31.3086 9.47708 32.4089 11.1109 33.2203 12.9868C34.0318 14.8627 34.4375 16.8671 34.4375 19V21.2155C34.4375 22.7179 33.9163 23.9976 32.874 25.0544C31.8316 26.1112 30.5583 26.6396 29.0542 26.6396C28.1438 26.6396 27.2927 26.4384 26.501 26.0359C25.7094 25.6335 25.0431 25.0694 24.5021 24.3438C23.7764 25.0958 22.9352 25.6665 21.9786 26.0557C21.022 26.445 20.031 26.6396 19.0055 26.6396C16.8775 26.6396 15.0714 25.8974 13.587 24.413C12.1026 22.9286 11.3604 21.1243 11.3604 19C11.3604 16.8757 12.1026 15.0714 13.587 13.587C15.0714 12.1026 16.8757 11.3604 19 11.3604C21.1243 11.3604 22.9286 12.1026 24.413 13.587C25.8974 15.0714 26.6396 16.8737 26.6396 18.9941V21.2167C26.6396 21.9028 26.8705 22.4833 27.3323 22.9583C27.7941 23.4333 28.3681 23.6708 29.0542 23.6708C29.7403 23.6708 30.3142 23.4333 30.776 22.9583C31.2378 22.4833 31.4688 21.9028 31.4688 21.2167V19C31.4688 15.5299 30.2582 12.5842 27.837 10.163C25.4158 7.74184 22.4701 6.53125 19 6.53125C15.5299 6.53125 12.5842 7.74184 10.163 10.163C7.74184 12.5842 6.53125 15.5299 6.53125 19C6.53125 22.4701 7.74184 25.4158 10.163 27.837C12.5842 30.2582 15.5299 31.4688 19 31.4688H25.3135C25.7226 31.4688 26.0722 31.6139 26.3625 31.9042C26.6528 32.1944 26.7979 32.5441 26.7979 32.9531C26.7979 33.3622 26.6528 33.7118 26.3625 34.0021C26.0722 34.2924 25.7226 34.4375 25.3135 34.4375H19ZM18.9953 23.6708C20.2915 23.6708 21.3948 23.2172 22.3052 22.3099C23.2156 21.4026 23.6708 20.3008 23.6708 19.0047C23.6708 17.7085 23.2172 16.6052 22.3099 15.6948C21.4025 14.7844 20.3008 14.3292 19.0047 14.3292C17.7085 14.3292 16.6052 14.7828 15.6948 15.6901C14.7844 16.5975 14.3292 17.6992 14.3292 18.9953C14.3292 20.2915 14.7828 21.3948 15.6901 22.3052C16.5974 23.2156 17.6992 23.6708 18.9953 23.6708Z"
              />
            </g>
          </svg>
        </a>

<main class="Main block-center-center content-3">
        <div class="MainForm block content-full">
          <div class="MobileFeedControls inline">
            <a href="#" class="active block-center-center">For you</a>
            <a href="#" class="block-center-center">Following</a>
          </div>
          <div class="FormContainer inline-center-center gap-1">
            <img
              class="Profile"
              src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/main.avif"
              alt=""
              width="36"
              height="36"
            />
            <button class="OpenDialogBtn" onclick="dialog.showModal()">
              Start a thread...
            </button>
            <button class="ButtonSubmit" type="submit" form="mainForm">
              Post
            </button>
          </div>
          <dialog class="Dialog" id="dialog">
            <div class="DialogWrapper block-center-center">
              <button
                id="CloseDialog"
                title="Close Dialog"
                aria-label="Close Dialog"
                onclick="dialog.close()"
              >
                <svg
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <mask
                    id="mask0_139_53"
                    style="mask-type: alpha"
                    maskUnits="userSpaceOnUse"
                    x="0"
                    y="0"
                    width="24"
                    height="24"
                  >
                    <rect width="24" height="24" fill="#F3F5F7" />
                  </mask>
                  <g mask="url(#mask0_139_53)">
                    <path
                      d="M6.4748 18.8504L5.1748 17.5254L10.6748 12.0004L5.1748 6.47539L6.4748 5.15039L11.9998 10.6754L17.5248 5.15039L18.8248 6.47539L13.3248 12.0004L18.8248 17.5254L17.5248 18.8504L11.9998 13.3254L6.4748 18.8504Z"
                      fill="#F3F5F7"
                    />
                  </g>
                </svg>
              </button>
              <form id="mainForm" class="Form inline" action="">
                <fieldset class="Fieldset block">
                  <header class="FormHeader inline-center-start">
                    <button
                      class="CancelBtn"
                      type="reset"
                      onclick="dialog.close()"
                    >
                      Cancel
                    </button>

<div class="NewTread">New thread</div>
                  </header>
                  <div class="DialogFormContainer block gap-4">
                    <div class="FormWrapper inline gap-1">
                      <div class="Visual">
                        <img
                          class="Profile"
                          src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/main.avif"
                          alt=""
                        />
                      </div>
                      <div
                        class="FormControls block gap-1"
                        style="--_gap: var(--md-space)"
                      >
                        <div>
                          <div class="Username">buster500</div>
                          <input
                            class="InputText"
                            type="text"
                            required
                            placeholder="Start a thread..."
                            autofocus
                          />
                        </div>

<button
                                type="button"
                                class="ControlsButton FormControlsElem"
                              >
                                <svg
                                  width="24"
                                  height="24"
                                  viewBox="0 0 24 24"
                                  fill="currentColor"
                                  xmlns="http://www.w3.org/2000/svg"
                                >
                                  <mask
                                    id="mask0_94_207"
                                    style="mask-type: alpha"
                                    maskUnits="userSpaceOnUse"
                                    x="0"
                                    y="0"
                                    width="24"
                                    height="24"
                                  >
                                    <rect width="24" height="24" />
                                  </mask>
                                  <g mask="url(#mask0_94_207)">
                                    <path
                                      d="M5.38607 20.3181C4.91363 20.3181 4.51145 20.1521 4.17952 19.8202C3.8476 19.4883 3.68164 19.0861 3.68164 18.6137V5.38607C3.68164 4.91363 3.8476 4.51145 4.17952 4.17952C4.51145 3.8476 4.91363 3.68164 5.38607 3.68164H18.6137C19.0861 3.68164 19.4883 3.8476 19.8202 4.17952C20.1521 4.51145 20.3181 4.91363 20.3181 5.38607V18.6137C20.3181 19.0861 20.1521 19.4883 19.8202 19.8202C19.4883 20.1521 19.0861 20.3181 18.6137 20.3181H5.38607ZM5.38834 18.9191H18.6114C18.6883 18.9191 18.7588 18.887 18.8229 18.8229C18.887 18.7588 18.9191 18.6883 18.9191 18.6114V5.38834C18.9191 5.31142 18.887 5.24091 18.8229 5.17679C18.7588 5.11269 18.6883 5.08064 18.6114 5.08064H5.38834C5.31142 5.08064 5.24091 5.11269 5.17679 5.17679C5.11269 5.24091 5.08064 5.31142 5.08064 5.38834V18.6114C5.08064 18.6883 5.11269 18.7588 5.17679 18.8229C5.24091 18.887 5.31142 18.9191 5.38834 18.9191ZM8.45179 13.8893H9.55274C9.78824 13.8893 9.98734 13.8086 10.15 13.6473C10.3127 13.486 10.3941 13.2862 10.3941 13.0479V12.4999C10.3941 12.3922 10.3554 12.2996 10.278 12.222C10.2005 12.1444 10.1081 12.1056 10.0005 12.1056C9.89304 12.1056 9.80115 12.1444 9.72487 12.222C9.64858 12.2996 9.61044 12.3922 9.61044 12.4999V13.0479C9.61044 13.064 9.60403 13.0776 9.59122 13.0888C9.5784 13.1 9.56557 13.1056 9.55274 13.1056H8.45179C8.43576 13.1056 8.42213 13.1 8.41091 13.0888C8.3997 13.0776 8.39409 13.064 8.39409 13.0479V10.947C8.39409 10.9342 8.3981 10.9213 8.40612 10.9085C8.41413 10.8957 8.42615 10.8893 8.44216 10.8893H9.99024C10.0979 10.8893 10.1906 10.8509 10.2681 10.7742C10.3457 10.6974 10.3845 10.6058 10.3845 10.4992C10.3845 10.3926 10.3457 10.3003 10.2681 10.2225C10.1906 10.1446 10.0979 10.1056 9.99024 10.1056H8.45179C8.21349 10.1056 8.01369 10.187 7.85239 10.3497C7.69109 10.5124 7.61044 10.7115 7.61044 10.947V13.0479C7.61044 13.2862 7.69109 13.486 7.85239 13.6473C8.01369 13.8086 8.21349 13.8893 8.45179 13.8893ZM12.0005 13.8893C12.1071 13.8893 12.1994 13.851 12.2773 13.7744C12.3551 13.6978 12.3941 13.6063 12.3941 13.4999V10.4999C12.3941 10.3922 12.3554 10.2996 12.278 10.222C12.2005 10.1444 12.1081 10.1056 12.0005 10.1056C11.893 10.1056 11.8011 10.1444 11.7249 10.222C11.6486 10.2996 11.6104 10.3922 11.6104 10.4999V13.4999C11.6104 13.6063 11.6488 13.6978 11.7256 13.7744C11.8023 13.851 11.894 13.8893 12.0005 13.8893ZM14.0005 13.8893C14.1071 13.8893 14.1994 13.851 14.2773 13.7744C14.3551 13.6978 14.3941 13.6063 14.3941 13.4999V12.3893H15.4999C15.6075 12.3893 15.7002 12.3509 15.7777 12.2742C15.8553 12.1974 15.8941 12.1058 15.8941 11.9992C15.8941 11.8926 15.8553 11.8003 15.7777 11.7225C15.7002 11.6446 15.6075 11.6056 15.4999 11.6056H14.3941V10.8893H15.9999C16.1075 10.8893 16.2002 10.8509 16.2777 10.7742C16.3553 10.6974 16.3941 10.6058 16.3941 10.4992C16.3941 10.3926 16.3553 10.3003 16.2777 10.2225C16.2002 10.1446 16.1075 10.1056 15.9999 10.1056H13.9999C13.8934 10.1056 13.8019 10.1444 13.7253 10.222C13.6487 10.2996 13.6104 10.3922 13.6104 10.4999V13.4999C13.6104 13.6063 13.6488 13.6978 13.7256 13.7744C13.8023 13.851 13.894 13.8893 14.0005 13.8893Z"
                                    />
                                  </g>
                                </svg>
                              </button>
                              <button
                                type="button"
                                class="ControlsButton FormControlsElem"
                              >
                                <span class="AppIcon material-symbols-rounded">
                                  <svg
                                    width="24"
                                    height="24"
                                    viewBox="0 0 24 24"
                                    fill="currentColor"
                                    xmlns="http://www.w3.org/2000/svg"
                                  >
                                    <mask
                                      id="mask0_94_233"
                                      style="mask-type: alpha"
                                      maskUnits="userSpaceOnUse"
                                      x="0"
                                      y="0"
                                      width="24"
                                      height="24"
                                    >
                                      <rect width="24" height="24" />
                                    </mask>
                                    <g mask="url(#mask0_94_233)">
                                      <path
                                        d="M9.00764 15.4861L8.15474 18.8448C8.12069 18.9984 8.04637 19.1189 7.93179 19.2062C7.8172 19.2934 7.67939 19.3371 7.51834 19.3371C7.3016 19.3371 7.12561 19.2508 6.99036 19.0784C6.85509 18.906 6.81535 18.715 6.87114 18.5054L7.62786 15.4861H4.85861C4.62358 15.4861 4.43518 15.3967 4.29341 15.218C4.15164 15.0393 4.11281 14.838 4.17691 14.614C4.21729 14.4602 4.30034 14.3339 4.42606 14.2352C4.55179 14.1365 4.69598 14.0871 4.85861 14.0871H7.98266L9.02209 9.90921H6.25284C6.0178 9.90921 5.8294 9.81985 5.68764 9.64111C5.54587 9.4624 5.50704 9.26106 5.57114 9.03711C5.61152 8.88328 5.69457 8.75701 5.82029 8.65829C5.94602 8.55957 6.0902 8.51021 6.25284 8.51021H9.38244L10.2298 5.15634C10.2638 5.00271 10.3381 4.88225 10.4527 4.79496C10.5673 4.7077 10.7067 4.66406 10.871 4.66406C11.0845 4.66406 11.2589 4.75028 11.3942 4.92271C11.5294 5.09513 11.5692 5.28615 11.5134 5.49576L10.7567 8.51021H14.9922L15.8451 5.15634C15.8792 5.00271 15.9535 4.88225 16.0681 4.79496C16.1827 4.7077 16.3221 4.66406 16.4863 4.66406C16.6999 4.66406 16.8743 4.75028 17.0095 4.92271C17.1448 5.09513 17.1845 5.28615 17.1287 5.49576L16.372 8.51021H19.1413C19.3763 8.51021 19.5647 8.60038 19.7065 8.78071C19.8482 8.96103 19.8887 9.16156 19.8278 9.38231C19.7842 9.53936 19.6995 9.66644 19.5738 9.76354C19.4481 9.86065 19.3039 9.90921 19.1413 9.90921H16.0172L14.9778 14.0871H17.747C17.9821 14.0871 18.1705 14.1773 18.3122 14.3576C18.454 14.5379 18.4944 14.7385 18.4336 14.9592C18.39 15.1162 18.3053 15.2433 18.1796 15.3404C18.0539 15.4376 17.9097 15.4861 17.747 15.4861H14.6174L13.7701 18.8448C13.736 18.9984 13.6617 19.1189 13.5472 19.2062C13.4326 19.2934 13.2948 19.3371 13.1337 19.3371C12.917 19.3371 12.741 19.2508 12.6057 19.0784C12.4705 18.906 12.4307 18.715 12.4865 18.5054L13.2432 15.4861H9.00764ZM9.36244 14.0871H13.593L14.6374 9.90921H10.4069L9.36244 14.0871Z"
                                      />
                                    </g>
                                  </svg>
                                </span>
                              </button>
                              <button
                                type="button"
                                class="ControlsButton FormControlsElem"
                              >
                                <span class="AppIcon material-symbols-rounded">
                                  <svg
                                    width="24"
                                    height="24"
                                    viewBox="0 0 24 24"
                                    fill="currentColor"
                                    xmlns="http://www.w3.org/2000/svg"
                                  >
                                    <mask
                                      id="mask0_94_227"
                                      style="mask-type: alpha"
                                      maskUnits="userSpaceOnUse"
                                      x="0"
                                      y="0"
                                      width="24"
                                      height="24"
                                    >
                                      <rect width="24" height="24" />
                                    </mask>
                                    <g mask="url(#mask0_94_227)">
                                      <path
                                        d="M16.9994 20.672C16.8054 20.672 16.6408 20.6043 16.5055 20.4689C16.3703 20.3335 16.3027 20.1688 16.3027 19.9749V17.672H13.9998C13.8059 17.672 13.6412 17.6043 13.5058 17.4688C13.3704 17.3333 13.3027 17.1686 13.3027 16.9746C13.3027 16.7806 13.3704 16.6151 13.5058 16.4783C13.6412 16.3414 13.8059 16.273 13.9998 16.273H16.3027V13.9749C16.3027 13.781 16.3704 13.6156 16.5059 13.4785C16.6414 13.3415 16.8061 13.273 17.0001 13.273C17.1941 13.273 17.3595 13.3415 17.4964 13.4785C17.6332 13.6156 17.7017 13.781 17.7017 13.9749V16.273H19.9998C20.1937 16.273 20.3591 16.3416 20.4961 16.4786C20.6332 16.6157 20.7017 16.7812 20.7017 16.9752C20.7017 17.1693 20.6332 17.3339 20.4961 17.4691C20.3591 17.6044 20.1937 17.672 19.9998 17.672H17.7017V19.9749C17.7017 20.1688 17.6331 20.3335 17.496 20.4689C17.359 20.6043 17.1934 20.672 16.9994 20.672ZM5.09304 17.6086C4.89912 17.6086 4.73365 17.54 4.59664 17.4029C4.45962 17.2659 4.39111 17.1003 4.39111 16.9063C4.39111 16.7155 4.45962 16.5517 4.59664 16.4148C4.73365 16.278 4.89912 16.2095 5.09304 16.2095H11.3565C11.3206 16.4459 11.3047 16.6799 11.3089 16.9113C11.3131 17.1428 11.328 17.3752 11.3536 17.6086H5.09304ZM5.09304 13.6691C4.89912 13.6691 4.73365 13.6006 4.59664 13.4635C4.45962 13.3264 4.39111 13.1609 4.39111 12.9669C4.39111 12.7761 4.45962 12.6123 4.59664 12.4754C4.73365 12.3386 4.89912 12.2701 5.09304 12.2701H13.7873C13.5103 12.4592 13.2571 12.6708 13.0277 12.9047C12.7982 13.1387 12.586 13.3935 12.3911 13.6691H5.09304ZM5.09304 9.70952C4.89912 9.70952 4.73365 9.64098 4.59664 9.50389C4.45962 9.36681 4.39111 9.20127 4.39111 9.00727C4.39111 8.81647 4.45962 8.65264 4.59664 8.51579C4.73365 8.37894 4.89912 8.31052 5.09304 8.31052H17.9315C18.1222 8.31052 18.286 8.37906 18.4231 8.51614C18.5601 8.65321 18.6286 8.81714 18.6286 9.00794C18.6286 9.20194 18.5601 9.36738 18.4231 9.50424C18.286 9.64109 18.1222 9.70952 17.9315 9.70952H5.09304ZM5.09304 5.77009C4.89912 5.77009 4.73365 5.70155 4.59664 5.56447C4.45962 5.42738 4.39111 5.26184 4.39111 5.06784C4.39111 4.87704 4.45962 4.71322 4.59664 4.57637C4.73365 4.43952 4.89912 4.37109 5.09304 4.37109H17.9315C18.1222 4.37109 18.286 4.43964 18.4231 4.57672C18.5601 4.71379 18.6286 4.87772 18.6286 5.06852C18.6286 5.26252 18.5601 5.42795 18.4231 5.56482C18.286 5.70167 18.1222 5.77009 17.9315 5.77009H5.09304Z"
                                      />
                                    </g>
                                  </svg>
                                </span>
                              </button>
                            </div>
                          </div>
                        </div>
                        <input
                          class="InputText AddToThread"
                          type="text"
                          placeholder="Add to thread"
                          disabled
                        />
                      </div>
                    </div>
                    <div class="FormFooter inline space-between">
                      <div class="AnyoneCanReplyToggle block">
                        <button type="button">Anyone can reply</button>
                      </div>

<div class="Content block-start-start gap-1">
            <header class="block gap-1 content-full">
              <div class="inline gap-1 space-between">
                <div
                  class="block gap-1"
                  style="padding-inline-start: var(--border-size-1)"
                >
                  <a href="#" class="User inline-center-center gap-1">
                    <img
                      class="UserAvatar"
                      src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/users-img/img-6.avif"
                      alt=""
                    />
                    <div class="Username">milo.mischief</div>
                    <div class="Badge">
                      <img
                        src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/verified.png"
                        alt="verified"
                      />
                    </div>
                  </a>
                </div>
                <div class="HeaderControls inline-center-center gap-1">
                  <a href="#" title="Mar 10, 10 PM" class="Date">15m</a>
                  <button aria-label="More" title="More" class="ProfileMoreBtn">
                    <svg
                      width="20"
                      height="20"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <g id="post-more-icon">
                        <mask
                          id="mask0_93_170"
                          style="mask-type: alpha"
                          maskUnits="userSpaceOnUse"
                          x="0"
                          y="0"
                          width="20"
                          height="20"
                        >
                          <rect width="20" height="20" />
                        </mask>
                        <g mask="url(#mask0_93_170)">
                          <path
                            d="M5.24542 11.4577C4.83864 11.4577 4.49463 11.3156 4.21338 11.0314C3.93213 10.7472 3.7915 10.4017 3.7915 9.99493C3.7915 9.58815 3.9336 9.24414 4.2178 8.96289C4.502 8.68164 4.84749 8.54102 5.25425 8.54102C5.66103 8.54102 6.00505 8.68311 6.2863 8.96731C6.56755 9.25152 6.70817 9.597 6.70817 10.0038C6.70817 10.4105 6.56607 10.7546 6.28188 11.0358C5.99767 11.3171 5.65218 11.4577 5.24542 11.4577ZM9.99542 11.4577C9.58864 11.4577 9.24463 11.3156 8.96338 11.0314C8.68213 10.7472 8.5415 10.4017 8.5415 9.99493C8.5415 9.58815 8.6836 9.24414 8.9678 8.96289C9.252 8.68164 9.59749 8.54102 10.0043 8.54102C10.411 8.54102 10.755 8.68311 11.0363 8.96731C11.3175 9.25152 11.4582 9.597 11.4582 10.0038C11.4582 10.4105 11.3161 10.7546 11.0319 11.0358C10.7477 11.3171 10.4022 11.4577 9.99542 11.4577ZM14.7454 11.4577C14.3386 11.4577 13.9946 11.3156 13.7134 11.0314C13.4321 10.7472 13.2915 10.4017 13.2915 9.99493C13.2915 9.58815 13.4336 9.24414 13.7178 8.96289C14.002 8.68164 14.3475 8.54102 14.7543 8.54102C15.161 8.54102 15.505 8.68311 15.7863 8.96731C16.0675 9.25152 16.2082 9.597 16.2082 10.0038C16.2082 10.4105 16.0661 10.7546 15.7819 11.0358C15.4977 11.3171 15.1522 11.4577 14.7454 11.4577Z"
                          />
                        </g>
                      </g>
                    </svg>
                  </button>
                </div>
              </div>
              <p class="Thread">
                Elevate your photography game to new heights, capturing moments
                that speak volumes. Your vision, our tools – let your creativity
                shine through! 🌟 <a href="#">#CaptureTheMoment</a>
                <a href="#">#PhotographyMagic</a>
              </p>
            </header>

<footer class="FooterControls block gap-1">
              <div class="InteractionControls inline-start-start">
                <div class="inline">
                  <button class="InteractionBtn" aria-label="Like" title="Like">
                    <svg
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <use href="#like-icon" />
                    </svg>
                  </button>
                  <button
                    class="InteractionBtn"
                    aria-label="Reply"
                    title="Reply"
                  >
                    <svg
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <use href="#reply-icon" />
                    </svg>
                  </button>
                  <button
                    class="InteractionBtn"
                    aria-label="Repost"
                    title="Repost"
                  >
                    <svg
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <use href="#repost-icon" />
                    </svg>
                  </button>
                  <button
                    class="InteractionBtn"
                    aria-label="Share"
                    title="Share"
                  >
                    <svg
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <use href="#share-icon" />
                    </svg>
                  </button>
                </div>
              </div>
              <div class="InfoWrapper inline-center-center gap-1">
                <a href="#" class="ReplyLink"> 22 replies</a>
                <span></span>
                <button class="ShowLikesBtn">586 likes</button>
              </div>
            </footer>
          </div>
        </div>
        <section class="SectionRecommendation block gap-2">
          <h2>Suggested for you</h2>
          <div class="inline">
            <ul id="scroller" class="UserList Scroller inline gap-1">
              <li>
                <a href="#" class="Card block-center-center gap-1">
                  <button class="RemoveBtn">
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        id="close-icon"
                        d="M8.00003 8.93334L4.73337 12.2C4.61114 12.3222 4.45559 12.3833 4.2667 12.3833C4.07781 12.3833 3.92225 12.3222 3.80003 12.2C3.67781 12.0778 3.6167 11.9222 3.6167 11.7333C3.6167 11.5444 3.67781 11.3889 3.80003 11.2667L7.0667 8L3.80003 4.73334C3.67781 4.61111 3.6167 4.45556 3.6167 4.26667C3.6167 4.07778 3.67781 3.92222 3.80003 3.8C3.92225 3.67778 4.07781 3.61667 4.2667 3.61667C4.45559 3.61667 4.61114 3.67778 4.73337 3.8L8.00003 7.06667L11.2667 3.8C11.3889 3.67778 11.5445 3.61667 11.7334 3.61667C11.9223 3.61667 12.0778 3.67778 12.2 3.8C12.3223 3.92222 12.3834 4.07778 12.3834 4.26667C12.3834 4.45556 12.3223 4.61111 12.2 4.73334L8.93337 8L12.2 11.2667C12.3223 11.3889 12.3834 11.5444 12.3834 11.7333C12.3834 11.9222 12.3223 12.0778 12.2 12.2C12.0778 12.3222 11.9223 12.3833 11.7334 12.3833C11.5445 12.3833 11.3889 12.3222 11.2667 12.2L8.00003 8.93334Z"
                        fill="#777777"
                      />
                    </svg>
                  </button>
                  <figure class="block-center-center gap-1">
                    <picture>
                      <img
                        src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/users-img/img-1.avif"
                        alt=""
                        width="80"
                        height="80"
                      />
                    </picture>
                    <figcaption class="block-center-center gap-1">
                      <div class="Name">Max Tailor</div>
                      <div class="Username">max_the_pawesome</div>
                    </figcaption>
                  </figure>
                  <button class="FollowButton">Follow</button>
                </a>
              </li>
              <li>
                <a href="#" class="Card block-center-center gap-1">
                  <button class="RemoveBtn">
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <use href="#close-icon"></use>
                    </svg>
                  </button>
                  <figure class="block-center-center gap-1">
                    <picture>
                      <img
                        src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/users-img/img-2.avif"
                        alt=""
                        width="80"
                        height="80"
                      />
                    </picture>
                    <figcaption class="block-center-center gap-1">
                      <div class="Name">Bella Barker</div>
                      <div class="Username">bella_barker_tailwagger</div>
                    </figcaption>
                  </figure>
                  <button class="FollowButton">Follow</button>
                </a>
              </li>
              <li>
                <a href="#" class="Card block-center-center gap-1">
                  <button class="RemoveBtn">
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <use href="#close-icon"></use>
                    </svg>
                  </button>
                  <figure class="block-center-center gap-1">
                    <picture>
                      <img
                        src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/users-img/img-3.avif"
                        alt=""
                        width="80"
                        height="80"
                      />
                    </picture>
                    <figcaption class="block-center-center gap-1">
                      <div class="Name">Ruffington</div>
                      <div class="Username">rockstar_ruffington_rover</div>
                    </figcaption>
                  </figure>
                  <button class="FollowButton">Follow</button>
                </a>
              </li>
              <li>
                <a href="#" class="Card block-center-center gap-1">
                  <button class="RemoveBtn">
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <use href="#close-icon"></use>
                    </svg>
                  </button>
                  <figure class="block-center-center gap-1">
                    <picture>
                      <img
                        src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/users-img/img-4.avif"
                        alt=""
                        width="80"
                        height="80"
                      />
                    </picture>
                    <figcaption class="block-center-center gap-1">
                      <div class="Name">Luna Lovetail</div>
                      <div class="Username">lunar_lovetail_lovebug</div>
                    </figcaption>
                  </figure>
                  <button class="FollowButton">Follow</button>
                </a>
              </li>
              <li>
                <a href="#" class="Card block-center-center gap-1">
                  <button class="RemoveBtn">
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <use href="#close-icon"></use>
                    </svg>
                  </button>
                  <figure class="block-center-center gap-1">
                    <picture>
                      <img
                        src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/users-img/img-5.avif"
                        alt=""
                        width="80"
                        height="80"
                      />
                    </picture>
                    <figcaption class="block-center-center gap-1">
                      <div class="Name">Mocha Meowster</div>
                      <div class="Username">mocha_meowster</div>
                    </figcaption>
                  </figure>
                  <button class="FollowButton">Follow</button>
                </a>
              </li>
              <li>
                <a href="#" class="Card block-center-center gap-1">
                  <button class="RemoveBtn">
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <use href="#close-icon"></use>
                    </svg>
                  </button>
                  <figure class="block-center-center gap-1">
                    <picture>
                      <img
                        src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/users-img/img-6.avif"
                        alt=""
                        width="80"
                        height="80"
                      />
                    </picture>
                    <figcaption class="block-center-center gap-1">
                      <div class="Name">Milo Mischief</div>
                      <div class="Username">milo_mischief_maker</div>
                    </figcaption>
                  </figure>
                  <button class="FollowButton">Follow</button>
                </a>
              </li>
              <li>
                <a href="#" class="Card block-center-center gap-1">
                  <button class="RemoveBtn">
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <use href="#close-icon"></use>
                    </svg>
                  </button>
                  <figure class="block-center-center gap-1">
                    <picture>
                      <img
                        src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/users-img/img-7.avif"
                        alt=""
                        width="80"
                        height="80"
                      />
                    </picture>
                    <figcaption class="block-center-center gap-1">
                      <div class="Name">Daisy</div>
                      <div class="Username">daisy_dreamer</div>
                    </figcaption>
                  </figure>
                  <button class="FollowButton">Follow</button>
                </a>
              </li>
              <li>
                <a href="#" class="Card block-center-center gap-1">
                  <button class="RemoveBtn">
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <use href="#close-icon"></use>
                    </svg>
                  </button>
                  <figure class="block-center-center gap-1">
                    <picture>
                      <img
                        src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/users-img/img-8.avif"
                        alt=""
                        width="80"
                        height="80"
                      />
                    </picture>
                    <figcaption class="block-center-center gap-1">
                      <div class="Name">Coco Cuddlebug</div>
                      <div class="Username">coco_pup</div>
                    </figcaption>
                  </figure>
                  <button class="FollowButton">Follow</button>
                </a>
              </li>
              <li>
                <a href="#" class="Card block-center-center gap-1">
                  <button class="RemoveBtn">
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <use href="#close-icon"></use>
                    </svg>
                  </button>
                  <figure class="block-center-center gap-1">
                    <picture>
                      <img
                        src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/users-img/img-9.avif"
                        alt=""
                        width="80"
                        height="80"
                      />
                    </picture>
                    <figcaption class="block-center-center gap-1">
                      <div class="Name">Duke Pawsley</div>
                      <div class="Username">duke_pawsley_adventures</div>
                    </figcaption>
                  </figure>
                  <button class="FollowButton">Follow</button>
                </a>
              </li>
              <li>
                <a href="#" class="Card block-center-center gap-1">
                  <button class="RemoveBtn">
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <use href="#close-icon"></use>
                    </svg>
                  </button>
                  <figure class="block-center-center gap-1">
                    <picture>
                      <img
                        src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/users-img/img-10.avif"
                        alt=""
                        width="80"
                        height="80"
                      />
                    </picture>
                    <figcaption class="block-center-center gap-1">
                      <div class="Name">Bentley Barkington</div>
                      <div class="Username">bentley_barkington_explorer</div>
                    </figcaption>
                  </figure>
                  <button class="FollowButton">Follow</button>
                </a>
              </li>
              <li>
                <a href="#" class="Card block-center-center gap-1">
                  <button class="RemoveBtn">
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <use href="#close-icon"></use>
                    </svg>
                  </button>
                  <figure class="block-center-center gap-1">
                    <picture>
                      <img
                        src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/users-img/img-11.avif"
                        alt=""
                        width="80"
                        height="80"
                      />
                    </picture>
                    <figcaption class="block-center-center gap-1">
                      <div class="Name">Zeus Wagmore</div>
                      <div class="Username">zeus_wagmore_pawesome</div>
                    </figcaption>
                  </figure>
                  <button class="FollowButton">Follow</button>
                </a>
              </li>
              <li>
                <a href="#" class="Card block-center-center gap-1">
                  <button class="RemoveBtn">
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <use href="#close-icon"></use>
                    </svg>
                  </button>
                  <figure class="block-center-center gap-1">
                    <picture>
                      <img
                        src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/users-img/img-12.avif"
                        alt=""
                        width="80"
                        height="80"
                      />
                    </picture>
                    <figcaption class="block-center-center gap-1">
                      <div class="Name">Finnegan Fetcher</div>
                      <div class="Username">finnegan_fetcher</div>
                    </figcaption>
                  </figure>
                  <button class="FollowButton">Follow</button>
                </a>
              </li>
            </ul>
            <div class="Controls block-center-center">
              <div class="inline content-3 space-between content-full">
                <button
                  id="PrevBtn"
                  class="ControlsBtn previous"
                  aria-label="Previous item"
                  title="Previous item"
                  onclick="scroller.scrollBy(-500, 0)"
                >
                  <svg
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                  >
                    <path d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
                  </svg>
                </button>
                <button
                  id="NextBtn"
                  class="ControlsBtn next"
                  aria-label="Next item"
                  title="Next item"
                  onclick="scroller.scrollBy(500, 0)"
                >
                  <svg
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                  >
                    <path d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </section>

<div class="Slot">
              <div class="Content block-start-start gap-1">
                <header class="block gap-1 content-full">
                  <div class="inline gap-1 space-between">
                    <div
                      class="block gap-1"
                      style="padding-inline-start: var(--border-size-1)"
                    >
                      <a href="#" class="User inline-center-center gap-1">
                        <img
                          class="UserAvatar"
                          src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/logo-editor.png"
                          alt=""
                        />
                        <div class="Username">coco.studio</div>
                        <div class="Badge">
                          <img
                            src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/threads-feed/assets/verified.png"
                            alt="verified"
                          />
                        </div>
                      </a>
                    </div>
                    <div class="HeaderControls inline-center-center gap-1">
                      <a href="#" title="Mar 11, 6:00 PM" class="Date">18h</a>
                      <button
                        aria-label="More"
                        title="More"
                        class="ProfileMoreBtn"
                      >
                        <svg
                          width="20"
                          height="20"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <use href="#post-more-icon"></use>
                        </svg>
                      </button>
                    </div>
                  </div>
                  <p class="Thread">
                    Create stunning videos effortlessly with our AI-powered
                    software! 🎥✨
                  </p>
                </header>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@import 'https://unpkg.com/open-props' layer(design.system);
/* Source code of these utilities: https://github.com/mobalti/layout-craft/blob/main/lib/utilities.css */
@import 'https://www.unpkg.com/layout-craft@1.0.1/dist/utilities.css'
  layer(base.utilities);

@layer base.reset {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

:where(:not(dialog)) {
    margin: 0;
    padding: 0;
  }

:where(img, svg, video) {
    max-inline-size: 100%;
    block-size: auto;
    display: block;
  }

:where(ul, menu) {
    list-style: none;
  }

:where(button) {
    border: unset;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: inherit;

user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

:where(a) {
    color: inherit;
    text-decoration: none;
    font-family: inherit;
  }

:where(h1, h2, h3, h4, h5, h6) {
    font-size: inherit;
  }

:where(html) {
    /* --motionOK */
    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }
}

@layer base.app {
  :root {
    font-family: var(--font-sans);

color-scheme: dark;
    --custom-radios: 10px;

--md-space: 0.75rem;

--surface-1: oklch(0.17 0 0);
    --surface-1-alpha-85: oklch(0.17 0 0 / 0.85);
    --surface-1-alpha-15: oklch(0.97 0 0 / 0.15);
    --surface-2: oklch(0.21 0 0);
    --surface-3: oklch(0.32 0 0);

--surface-4: oklch(0.24 0 0);
    --surface-5: oklch(0.46 0 0);
    --surface-6-alpha-05: oklch(1 0 0 / 0.05);

--text-1: oklch(0.97 0 0);
    --text-2: oklch(0.57 0 0);
    --text-3: oklch(0.42 0 0);

--link: oklch(0.65 0.18 248.22);
  }

body {
    min-block-size: 100dvb;
    background-color: var(--surface-1);
    color: var(--text-1);
    /* 15px */
    font-size: 0.9375rem;
    line-height: calc(1.4 * 1em);

-webkit-font-smoothing: antialiased;
    overflow: visible;
  }
  .App {
    position: relative;
    isolation: isolate;
  }

.Main {
    padding-block-end: var(--size-10);
    @media (width >= 700px) {
      --_content: 620px;
      padding-inline: var(--size-5);
    }
  }
}

@layer components.Navbar {
  .Navbar {
    --nav-block-size: 74px;
    --_content: 1230px;
    position: sticky;
    block-size: var(--nav-block-size);
    padding-inline: var(--size-3);
    isolation: isolate;
    inset-block-start: 0;
    z-index: var(--layer-important);

&::after {
      content: '';
      position: absolute;
      inset-inline: 0;
      block-size: var(--nav-block-size);
      background-color: var(--surface-1-alpha-85);
      backdrop-filter: blur(28.5px);
      z-index: -1;
    }

.NavLink {
      display: grid;
      align-items: center;
      justify-content: center;
      text-decoration: none;

border-radius: calc(var(--radius-3) / 2);
      block-size: calc(100% - 2px);

color: var(--text-3);
      position: relative;
      padding: var(--size-2);

&::before {
        content: '';
        display: block;
        position: absolute;
        border-radius: inherit;
        inset: 0;
        background-color: var(--surface-6-alpha-05);
        scale: 0.8;
        transition-property: opacity, scale;
        transition-duration: 0.1s;
        transition-timing-function: ease-out;
        opacity: 0;
      }

&:hover {
        &::before {
          opacity: 1;
          scale: 1;
        }
      }

&:active {
        &::before {
          opacity: 1;
          scale: 0.8;
        }
      }

&.active {
        color: var(--text-1);
      }

@media (width >= 700px) {
        padding-inline: var(--size-7);
        padding-block: var(--size-3);
      }
    }

.MoreButton {
      border: none;
      color: var(--text-3);
      transition-property: color, scale;
      transition-duration: 0.2s;
      transition-timing-function: ease;
      cursor: pointer;
      block-size: var(--size-8);
      inline-size: var(--size-8);
      background: transparent;
      &:is(:hover, :active) {
        color: var(--text-1);
      }
    }

.Logo {
      color: var(--text-1);
      transition: scale 0.2s ease;
    }

:is(.Logo, .MoreButton) {
      &:hover {
        scale: 1.07;
      }

&:active {
        scale: 0.98;
      }
    }

@media (width < 700px) {
      --nav-block-size: 60px;
      grid-template-columns: var(--size-8) 1fr var(--size-8);
      padding-inline: 0.875rem;

> .Logo {
        grid-column: 2/3;
      }
      > .MoreButton {
        grid-column: 3/-1;
      }

.Menu {
        position: fixed;
        inset-block-end: 0;
        inset-inline: 0;
        block-size: 68px;

grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        background-color: var(--surface-1-alpha-85);
        backdrop-filter: blur(28.5px);
      }
    }
  }
}

@layer components.Recommendation {
  .SectionRecommendation {
    position: relative;
    inline-size: 100%;
    border-block-start: 0.5px solid var(--surface-1-alpha-15);
    padding-block: var(--size-3);
    isolation: isolate;
    h2 {
      font-weight: var(--font-weight-6);

@media (width < 700px) {
        padding-inline-start: var(--md-space);
      }
    }
    .UserList {
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth; /* Hide scrollbar */
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
      &::-webkit-scrollbar {
        display: none;
      }

@media (width < 700px) {
        padding-inline: var(--md-space);
        scroll-padding-inline: var(--md-space);
      }
    }
    .Card {
      scroll-snap-align: start;
      background-color: var(--surface-4);
      border-radius: var(--custom-radios);
      padding: var(--size-4);
      position: relative;
      inline-size: 156px;
      block-size: 204px;
      padding: 0.875rem;
      text-decoration: none;
      figcaption {
        --_gap: 0.2ex;
      }
      img {
        --size: 80px;
        block-size: var(--size);
        inline-size: var(--size);
        border-radius: var(--radius-round);
        background: var(--gradient-8);
      }
      .Name {
        font-weight: var(--font-weight-6);
      }
      .Username {
        color: var(--text-2);
      }
      :is(.Name, .Username) {
        max-inline-size: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &:hover {
          text-decoration: underline;
        }
      }
      .RemoveBtn {
        background: transparent;
        border: unset;
        border-radius: var(--radius-round);
        position: absolute;
        inset-inline-end: var(--size-2);
        inset-block-start: var(--md-space);
        scale: 0.8;
        cursor: pointer;
      }
      .FollowButton {
        background-color: var(--text-1);
        color: var(--surface-1);
        font-weight: var(--font-weight-6);
        padding-inline: var(--size-5);
        border-radius: var(--custom-radios);
        padding-block: var(--size-2);
        inline-size: 100%;
      }
    }
    .Controls {
      position: absolute;
      inset-inline: calc(var(--size-9) * -1);
      block-size: 204px;

z-index: -1;
      .Wrapper {
        --_content: 700px;
      }
      @media (width < 768px) {
        display: none;
      }
    }

.ControlsBtn {
      inline-size: calc(var(--size-6) + var(--size-3));
      block-size: calc(var(--size-6) + var(--size-3));
      padding: var(--md-space);
      border-radius: var(--radius-round);
      background-color: var(--surface-4);
      color: var(--text-2);
      transition: 0.2s ease;
      opacity: 0;

&:hover {
        scale: 1.07;
      }
      &:active {
        scale: 1.03;
      }
    }

&:hover {
      .ControlsBtn {
        opacity: 1;
      }
    }
  }
  @layer scrollDrivenAnimation {
    .SectionRecommendation {
      timeline-scope: --carousel;

.Scroller {
        scroll-timeline: --carousel inline;
      }
      .next {
        animation: auto next ease forwards;
        animation-timeline: --carousel;
      }
      .previous {
        animation: auto prev ease forwards;
        animation-timeline: --carousel;
      }
    }

@keyframes prev {
      from {
        visibility: hidden;
      }
    }
    @keyframes next {
      to {
        visibility: hidden;
      }
    }
  }
}

@layer components.Post {
  @layer base {
    .Post {
      --_gap: var(--size-1);
      inline-size: 100%;
      grid-template-columns: auto 1fr;
      padding-block: var(--md-space);
      text-decoration: none;
      cursor: pointer;

/* all except the first Post */
      &:not(:nth-of-type(2)) {
        border-block-start: 0.5px solid var(--surface-1-alpha-15);
      }
      @media (width < 700px) {
        padding-inline: var(--md-space);
      }

a:hover {
        text-decoration: underline;
      }

button {
        background-color: inherit;
      }

header {
        --_gap: var(--size-1);
      }

.ProfileMoreBtn,
      .InteractionBtn {
        border-radius: var(--radius-round);
        aspect-ratio: var(--ratio-square);
        position: relative;
        isolation: isolate;

&::after {
          display: block;
          content: '';
          position: absolute;
          inset: 0;
          background-color: var(--surface-4);
          border-radius: inherit;
          z-index: -1;
          scale: 0.8;
          transition-property: opacity, scale;
          transition-duration: 0.1s;
          transition-timing-function: ease-out;
          opacity: 0;
        }

&:hover {
          &::after {
            opacity: 1;
            scale: 1;
          }
        }

&:active {
          scale: 0.9;
        }
      }
    }
  }

.Post {
    .Avatar {
      position: relative;
      img {
        --_size: 36px;
        inline-size: var(--_size);
        block-size: var(--_size);
        border: var(--border-size-1) solid var(--surface-3);
        border-radius: var(--radius-round);
      }
    }

.ProfileFollowBtn {
      background-color: white;
      border-radius: var(--radius-round);
      inset-block-end: calc(var(--border-size-3) * -1);
      inset-inline-end: calc(var(--border-size-3) * -1);
      border: var(--border-size-2) solid var(--surface-1);
      position: absolute;
      overflow: clip;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: var(--size-4);
      block-size: var(--size-4);
      transition: scale 0.2s ease;
      color: var(--surface-1);

.Avatar:hover & {
        scale: 1.07;
      }

.Avatar:active & {
        scale: 0.85;
      }
    }

.Badge img {
      block-size: 12px;
      min-inline-size: 12px;
    }

.Date {
      color: var(--text-2);
      text-decoration: none;
    }
    .Username {
      font-weight: var(--font-weight-6);
      text-overflow: ellipsis;
      overflow: hidden;
      max-inline-size: 100%;
    }

.InteractionBtn {
      --iconScale: 1;
      inline-size: calc(var(--size-7) + var(--size-1));
      block-size: calc(var(--size-7) + var(--size-1));
    }

.Profile {
      padding-block: 0.8ex;
      img {
        border: var(--border-size-1) solid var(--text-2);
      }
    }

.InfoWrapper {
      color: var(--text-2);
      padding-inline-start: var(--size-2);
      :is(a, span, button) {
        color: inherit;
      }

span {
        block-size: var(--border-size-2);
        inline-size: var(--border-size-2);
        border-radius: var(--radius-round);
        background-color: var(--text-2);
      }
    }
    .Thread {
      max-inline-size: 100%;

a {
        color: var(--link);
        font-weight: var(--font-weight-4);
      }
    }

.AvatarsContainer {
      padding-block: var(--size-1);
    }

.Visual {
      overflow: hidden;
      padding-block: var(--border-size-1);
      outline: 1px solid var(--surface-1-alpha-15);
      outline-offset: -1px;
      border-radius: calc(var(--radius-3) / 2);
      > * {
        max-block-size: 430px;
        border-radius: calc(var(--radius-3) / 2);
      }
    }

.User {
      --_gap: var(--size-1);
    }

.UserAvatar {
      block-size: 22px;
      min-inline-size: 22px;
      border-radius: var(--radius-round);
      display: none;
    }

.Slot:has(.Content) {
      justify-self: stretch;
    }

.Content {
      padding-block-end: var(--size-1);

> *:not(.FooterControls) {
        padding-inline-start: var(--size-2);
      }

/* Content Inside Content */
      .Content {
        border: var(--border-size-1) solid var(--surface-3);
        padding: var(--size-3);

> *:not(.FooterControls) {
          padding-inline-start: unset;
        }

.InfoWrapper {
          padding-inline-start: unset;
        }

border-radius: calc(var(--radius-3) / 2);
        :is(.ProfileMoreBtn, .InteractionControls) {
          display: none;
        }

.UserAvatar {
          display: block;
        }
      }
    }

.ProfileMoreBtn {
      inline-size: var(--size-5);
      block-size: var(--size-5);
    }

.FooterControls {
      --_gap: var(--size-1);
    }
  }
}

@layer components.ForYouLink {
  .ForYou {
    inline-size: 100dvw;
    position: fixed;
    inset-block-end: var(--size-7);
    inset-inline-start: 0;
    z-index: -1;
    padding-inline: var(--size-7);

.ForYouContainer {
      --_content: 1208px;
    }

svg {
      color: var(--text-2);
    }

@media (width < 900px) {
      display: none;
    }

.ForYouLink {
      --_gap: var(--size-1);
      background-color: var(--surface-2);
      border-radius: var(--radius-4);
      padding-block: var(--size-relative-6);
      padding-inline: 2.5ch;
      border: var(--border-size-1) solid var(--surface-4);
      font-weight: var(--font-weight-6);
      transition: scale 0.2s ease;
      &:hover {
        scale: 1.07;
      }

&:active {
        scale: 0.8;
      }
    }
  }
}

@layer components.Form {
  .MainForm {
    .FormContainer {
      grid-template-columns: auto 1fr auto;
      padding-block: var(--size-3);
      inline-size: 100%;
      border-block-end: 0.5px solid var(--surface-1-alpha-15);
    }

.OpenDialogBtn {
      inline-size: 100%;
      text-align: start;
      cursor: text;
      border-radius: unset;
      border: unset;
      padding-block: var(--size-2);
      padding-inline: var(--border-size-2);
      color: var(--text-2);
      background: inherit;
      justify-content: start;
    }

.Profile {
      inline-size: 36px;
      block-size: 36px;
      background: var(--gradient-8);
      border-radius: var(--radius-round);
    }

.Username {
      font-weight: var(--font-weight-6);
      text-overflow: ellipsis;
      overflow: hidden;
      max-inline-size: var(--size-content-1);
    }

.ButtonSubmit {
      background-color: var(--text-1);
      color: black;
      font-family: inherit;
      border: unset;
      padding-block: var(--size-2);
      padding-inline: var(--size-3);
      border-radius: var(--radius-4);
      cursor: pointer;
      font-weight: var(--font-weight-6);
      &:disabled {
        background-color: var(--surface-5);
        cursor: not-allowed;
      }
    }

.Dialog {
      border: unset;
      background-color: transparent;

max-inline-size: unset;
      max-block-size: unset;
      block-size: 100%;
      inline-size: 100%;
      margin: 0;
      padding: 0;
    }

.DialogWrapper {
      min-block-size: 100dvb;
      position: relative;
      isolation: isolate;
    }

#CloseDialog {
      background-color: inherit;
      position: absolute;
      inset-inline-end: var(--size-3);
      inset: 0;
      z-index: -1;
      background-color: transparent;
      inline-size: 100%;
    }

:is(.Username, .Controls) {
      padding-inline-start: var(--size-1);
    }

.FormWrapper {
      grid-template-columns: auto 1fr;
    }

.InputText {
      border-radius: unset;
      border: unset;
      padding: var(--size-1);
      background: inherit;
      font-size: inherit;
      outline: unset;
      inline-size: 100%;
      padding-inline-start: var(--size-1);
      &::placeholder {
        color: var(--text-2);
      }
    }

&:has(input:invalid) {
      .ButtonSubmit {
        background-color: var(--surface-5);
        cursor: not-allowed;
      }
    }

.Form {
      inline-size: min(618px, 80dvi);
    }

.Fieldset {
      border: unset;
    }

.CancelBtn {
      text-align: start;
      font-size: var(--font-size-2);
      background-color: inherit;
    }

.NewTread {
      justify-self: center;
      font-size: var(--font-size-1);
      font-weight: var(--font-weight-7);
      white-space: nowrap;
    }

.DialogFormContainer {
      background-color: var(--surface-2);
      padding-block: var(--size-6);

padding-inline: var(--size-5);

@media (width < 700px) {
        block-size: 100%;
        padding-block-end: var(--md-space);
      }
      @media (width >= 700px) {
        border-radius: var(--radius-3);
        border: var(--border-size-1) solid var(--surface-1-alpha-15);
      }
    }

.ControlsButton {
      --size: var(--size-5);
      inline-size: var(--size);
      block-size: var(--size);
      background-color: inherit;
      color: var(--text-2);
    }

.FieldInputControls {
      background-color: inherit;
      color: var(--text-2);
      cursor: pointer;
    }

.AddToThread:disabled {
      cursor: not-allowed;
      &::placeholder {
        color: var(--text-2);
        opacity: 0.4;
      }
    }
    .AnyoneCanReplyToggle {
      button {
        background-color: inherit;
        color: var(--text-2);
      }
    }

.MobileFeedControls {
      grid-template-columns: 1fr 1fr;
      a {
        block-size: calc(var(--size-8) + var(--border-size-1));
        border-bottom: var(--border-size-1) solid var(--surface-1-alpha-15);
        color: var(--text-2);
        font-weight: var(--font-weight-6);
        text-align: center;
      }

a.active {
        color: var(--text-1);
        border-color: currentColor;
      }
    }

@media (width < 700px) {
      .Form {
        --header-block-size: 46px;
        min-block-size: 100dvb;
        grid-template-rows: min-content 1fr;
        background-color: var(--surface-2);

block-size: 100%;
        inline-size: 100%;
      }

.FormHeader {
        block-size: var(--header-block-size);
        grid-template-columns: 1fr 1fr 1fr;
        padding-inline: var(--size-5);
      }

.DialogFormContainer {
        block-size: calc(100dvb - var(--header-block-size));
        align-content: space-between;
      }

.FormContainer {
        display: none;
      }

#CloseDialog {
        display: none;
      }

.Dialog {
        margin: 0;
        inset: 0;
        padding: 0;
        min-block-size: 100%;
        min-inline-size: 100%;
        block-size: 100dvb;
      }
    }

@media (width >= 700px) {
      .Fieldset {
        gap: var(--size-6);
      }
      .MobileFeedControls {
        display: none;
      }

.CancelBtn {
        display: none;
      }
    }
  }
}

@layer dialog-animation {
  .Dialog {
    animation: dialogDisappear 0.5s ease forwards;
  }

.Dialog[open] {
    animation: dialogAppear 0.5s ease forwards;
  }

.Dialog::backdrop {
    animation: backdropFadeOut 0.5s ease forwards;
  }

.Dialog[open]::backdrop {
    animation: backdropFadeIn 0.5s ease forwards;
  }

@keyframes dialogAppear {
    0% {
      opacity: 0;
      scale: 0;
    }
    60% {
      opacity: 1;
    }

100% {
      opacity: 1;
      scale: 1;
      display: block;
    }
  }

@keyframes dialogDisappear {
    0% {
      opacity: 1;
      scale: 1;
      display: block;
    }
    60% {
      opacity: 1;
    }

100% {
      opacity: 0;
      scale: 0;
      display: none;
    }
  }

@keyframes backdropFadeIn {
    0% {
      background-color: oklch(0 0 0 / 0%);
    }

100% {
      background-color: oklch(0 0 0 / 40%);
      display: block;
    }
  }

@keyframes backdropFadeOut {
    0% {
      background-color: oklch(0 0 0 / 40%);
      display: block;
    }

100% {
      background-color: oklch(0 0 0 / 0%);
      display: none;
    }
  }
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Threads Feed Simulation

About this Code

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever