<div class="main-container">
  <div class="radio-input">
    <div class="option">
      <label class="favicon" for="value-1">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20px"
          viewBox="0 0 24 24"
          style="flex:none;line-height:1"
          height="20px"
        >
          <title>Cursor</title>
          <path
            fill="url(#lobe-icons-cursorundefined-fill-0)"
            d="M11.925 24l10.425-6-10.425-6L1.5 18l10.425 6z"
          ></path>
          <path
            fill="url(#lobe-icons-cursorundefined-fill-1)"
            d="M22.35 18V6L11.925 0v12l10.425 6z"
          ></path>
          <path
            fill="url(#lobe-icons-cursorundefined-fill-2)"
            d="M11.925 0L1.5 6v12l10.425-6V0z"
          ></path>
          <path fill="#555" d="M22.35 6L11.925 24V12L22.35 6z"></path>
          <path fill="#000" d="M22.35 6l-10.425 6L1.5 6h20.85z"></path>
          <defs>
            <linearGradient
              y2="24"
              y1="12"
              x2="11.925"
              x1="11.925"
              id="lobe-icons-cursorundefined-fill-0"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-opacity=".39" stop-color="#000" offset=".16"></stop>
              <stop stop-opacity=".8" stop-color="#000" offset=".658"></stop>
            </linearGradient>
            <linearGradient
              y2="12.15"
              y1="6.037"
              x2="11.925"
              x1="22.35"
              id="lobe-icons-cursorundefined-fill-1"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-opacity=".31" stop-color="#000" offset=".182"></stop>
              <stop stop-opacity="0" stop-color="#000" offset=".715"></stop>
            </linearGradient>
            <linearGradient
              y2="18"
              y1="0"
              x2="1.5"
              x1="11.925"
              id="lobe-icons-cursorundefined-fill-2"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-opacity=".6" stop-color="#000"></stop>
              <stop stop-opacity=".22" stop-color="#000" offset=".667"></stop>
            </linearGradient>
          </defs>
        </svg>
      </label>
      <input
        class="input cursor"
        value="value-1"
        name="value-radio"
        id="value-1"
        type="radio"
        checked=""
      />
      <label class="label" for="value-1">Cursor </label>
      <label class="url" for="value-1">cursor.com</label>
    </div>

    <div class="option">
      <label class="favicon" for="value-3">
        <svg
          width="20px"
          height="20px"
          viewBox="0 0 256 256"
          fill="none"
          version="1.1"
          id="svg910"
          xmlns="http://www.w3.org/2000/svg"
        >
          <mask
            id="mask0_1_498"
            maskUnits="userSpaceOnUse"
            x="0"
            y="0"
            width="256"
            height="228"
          >
            <path
              d="m 128,227.734 c -2.56,0 -5.138,-0.463 -7.734,-1.388 -2.595,-0.924 -4.852,-2.346 -6.772,-4.266 L 94.8256,204.906 C 69.6523,181.652 47.5552,159.199 28.5344,137.546 9.51147,115.892 0,92.8704 0,68.48 0,48.9963 6.54187,32.7115 19.6256,19.6256 32.7115,6.54187 48.9248,0 68.2656,0 79.2885,0 90.0267,2.54187 100.48,7.62561 110.933,12.7115 120.107,20.6229 128,31.36 136.604,20.6229 145.919,12.7115 155.946,7.62561 165.972,2.54187 176.569,0 187.734,0 207.075,0 223.289,6.54187 236.374,19.6256 249.458,32.7115 256,48.9963 256,68.48 c 0,24.3904 -9.493,47.43 -28.48,69.12 -18.987,21.69 -41.138,44.161 -66.454,67.414 l -18.56,17.066 c -1.92,1.92 -4.177,3.342 -6.772,4.266 -2.596,0.925 -5.174,1.388 -7.734,1.388 z"
              fill="#ffffff"
              id="path824"
            ></path>
          </mask>
          <g mask="url(#mask0_1_498)" id="g857" transform="translate(0,14.133)">
            <g id="g1089">
              <path
                d="m 128,227.734 c -2.56,0 -5.138,-0.463 -7.734,-1.388 -2.595,-0.924 -4.852,-2.346 -6.772,-4.266 L 94.8256,204.906 C 69.6523,181.652 47.5552,159.199 28.5344,137.546 9.51147,115.892 0,92.8704 0,68.48 0,48.9963 6.54187,32.7115 19.6256,19.6256 32.7115,6.54187 48.9248,0 68.2656,0 79.2885,0 90.0267,2.54187 100.48,7.62561 110.933,12.7115 120.107,20.6229 128,31.36 136.604,20.6229 145.919,12.7115 155.946,7.62561 165.972,2.54187 176.569,0 187.734,0 207.075,0 223.289,6.54187 236.374,19.6256 249.458,32.7115 256,48.9963 256,68.48 c 0,24.3904 -9.493,47.43 -28.48,69.12 -18.987,21.69 -41.138,44.161 -66.454,67.414 l -18.56,17.066 c -1.92,1.92 -4.177,3.342 -6.772,4.266 -2.596,0.925 -5.174,1.388 -7.734,1.388 z"
                fill="#ff1814"
                id="path827"
              ></path>
              <g filter="url(#filter0_f_1_498)" id="g831">
                <ellipse
                  cx="163.767"
                  cy="278.08301"
                  rx="96.787102"
                  ry="98.052299"
                  transform="rotate(-105,163.767,278.083)"
                  fill="#ffab25"
                  id="ellipse829"
                ></ellipse>
              </g>
              <g filter="url(#filter1_f_1_498)" id="g835">
                <ellipse
                  cx="224.87199"
                  cy="261.70901"
                  rx="96.787102"
                  ry="98.052299"
                  transform="rotate(-105,224.872,261.709)"
                  fill="#ffab25"
                  id="ellipse833"
                ></ellipse>
              </g>
              <g filter="url(#filter2_f_1_498)" id="g839">
                <ellipse
                  cx="69.918198"
                  cy="172.24699"
                  rx="96.787102"
                  ry="98.052299"
                  transform="rotate(-105,69.9182,172.247)"
                  fill="#ffab25"
                  id="ellipse837"
                ></ellipse>
              </g>
              <g filter="url(#filter3_f_1_498)" id="g843">
                <ellipse
                  cx="131.022"
                  cy="155.873"
                  rx="96.787102"
                  ry="98.052299"
                  transform="rotate(-105,131.022,155.873)"
                  fill="#ffab25"
                  id="ellipse841"
                ></ellipse>
              </g>
              <g filter="url(#filter4_f_1_498)" id="g847">
                <circle
                  cx="-89.587303"
                  cy="48.319099"
                  r="108.428"
                  transform="rotate(2.38352,-89.5873,48.3191)"
                  fill="#be2b29"
                  id="circle845"
                ></circle>
              </g>
              <g filter="url(#filter5_f_1_498)" id="g851">
                <ellipse
                  cx="81.517502"
                  cy="70.523697"
                  rx="81.517502"
                  ry="70.523697"
                  transform="matrix(-0.67039,-0.742009,0.730841,-0.682548,206.356,122.303)"
                  fill="#00c986"
                  id="ellipse849"
                ></ellipse>
              </g>
              <g
                style="mix-blend-mode:hard-light"
                filter="url(#filter6_f_1_498)"
                id="g855"
              >
                <ellipse
                  cx="91.893898"
                  cy="79.4459"
                  rx="91.893898"
                  ry="79.4459"
                  transform="matrix(-0.67039,-0.742009,0.730841,-0.682548,255.859,191.054)"
                  fill="#297fff"
                  id="ellipse853"
                ></ellipse>
              </g>
            </g>
          </g>
          <defs id="defs908">
            <filter
              id="filter0_f_1_498"
              x="-25.3186"
              y="90.0923"
              width="378.172"
              height="375.98099"
              filterUnits="userSpaceOnUse"
              color-interpolation-filters="sRGB"
            >
              <feFlood
                flood-opacity="0"
                result="BackgroundImageFix"
                id="feFlood859"
              ></feFlood>
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="BackgroundImageFix"
                result="shape"
                id="feBlend861"
              ></feBlend>
              <feGaussianBlur
                stdDeviation="45.5469"
                result="effect1_foregroundBlur_1_498"
                id="feGaussianBlur863"
              ></feGaussianBlur>
            </filter>
            <filter
              id="filter1_f_1_498"
              x="35.786098"
              y="73.719002"
              width="378.172"
              height="375.98099"
              filterUnits="userSpaceOnUse"
              color-interpolation-filters="sRGB"
            >
              <feFlood
                flood-opacity="0"
                result="BackgroundImageFix"
                id="feFlood866"
              ></feFlood>
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="BackgroundImageFix"
                result="shape"
                id="feBlend868"
              ></feBlend>
              <feGaussianBlur
                stdDeviation="45.5469"
                result="effect1_foregroundBlur_1_498"
                id="feGaussianBlur870"
              ></feGaussianBlur>
            </filter>
            <filter
              id="filter2_f_1_498"
              x="-119.168"
              y="-15.7439"
              width="378.172"
              height="375.98099"
              filterUnits="userSpaceOnUse"
              color-interpolation-filters="sRGB"
            >
              <feFlood
                flood-opacity="0"
                result="BackgroundImageFix"
                id="feFlood873"
              ></feFlood>
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="BackgroundImageFix"
                result="shape"
                id="feBlend875"
              ></feBlend>
              <feGaussianBlur
                stdDeviation="45.5469"
                result="effect1_foregroundBlur_1_498"
                id="feGaussianBlur877"
              ></feGaussianBlur>
            </filter>
            <filter
              id="filter3_f_1_498"
              x="-58.063999"
              y="-32.117199"
              width="378.172"
              height="375.98099"
              filterUnits="userSpaceOnUse"
              color-interpolation-filters="sRGB"
            >
              <feFlood
                flood-opacity="0"
                result="BackgroundImageFix"
                id="feFlood880"
              ></feFlood>
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="BackgroundImageFix"
                result="shape"
                id="feBlend882"
              ></feBlend>
              <feGaussianBlur
                stdDeviation="45.5469"
                result="effect1_foregroundBlur_1_498"
                id="feGaussianBlur884"
              ></feGaussianBlur>
            </filter>
            <filter
              id="filter4_f_1_498"
              x="-359.96201"
              y="-222.05499"
              width="540.74902"
              height="540.74902"
              filterUnits="userSpaceOnUse"
              color-interpolation-filters="sRGB"
            >
              <feFlood
                flood-opacity="0"
                result="BackgroundImageFix"
                id="feFlood887"
              ></feFlood>
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="BackgroundImageFix"
                result="shape"
                id="feBlend889"
              ></feBlend>
              <feGaussianBlur
                stdDeviation="80.9722"
                result="effect1_foregroundBlur_1_498"
                id="feGaussianBlur891"
              ></feGaussianBlur>
            </filter>
            <filter
              id="filter5_f_1_498"
              x="37.035198"
              y="-154.718"
              width="332.42801"
              height="336.79901"
              filterUnits="userSpaceOnUse"
              color-interpolation-filters="sRGB"
            >
              <feFlood
                flood-opacity="0"
                result="BackgroundImageFix"
                id="feFlood894"
              ></feFlood>
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="BackgroundImageFix"
                result="shape"
                id="feBlend896"
              ></feBlend>
              <feGaussianBlur
                stdDeviation="45.5469"
                result="effect1_foregroundBlur_1_498"
                id="feGaussianBlur898"
              ></feGaussianBlur>
            </filter>
            <filter
              id="filter6_f_1_498"
              x="76.567902"
              y="-109.574"
              width="351.49701"
              height="356.43301"
              filterUnits="userSpaceOnUse"
              color-interpolation-filters="sRGB"
            >
              <feFlood
                flood-opacity="0"
                result="BackgroundImageFix"
                id="feFlood901"
              ></feFlood>
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="BackgroundImageFix"
                result="shape"
                id="feBlend903"
              ></feBlend>
              <feGaussianBlur
                stdDeviation="45.5469"
                result="effect1_foregroundBlur_1_498"
                id="feGaussianBlur905"
              ></feGaussianBlur>
            </filter>
          </defs>
        </svg>
      </label>
      <input
        class="input lovable"
        value="value-3"
        name="value-radio"
        id="value-3"
        type="radio"
      />
      <label class="label" for="value-3">Lovable</label>
      <label class="url" for="value-1">lovable.dev</label>
    </div>

    <div class="option new-tab">+</div>

    <div class="controls">
      <svg
        viewBox="0 0 24 24"
        version="1.1"
        width="18px"
        height="18px"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="#ccc"
      >
        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
        <g
          id="SVGRepo_tracerCarrier"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <title>minimize_line</title>
          <g
            id="页面-1"
            stroke="none"
            stroke-width="1"
            fill="none"
            fill-rule="evenodd"
          >
            <g id="System" transform="translate(-192.000000, -192.000000)">
              <g
                id="minimize_line"
                transform="translate(192.000000, 192.000000)"
              >
                <path
                  d="M24,0 L24,24 L0,24 L0,0 L24,0 Z M12.5934901,23.257841 L12.5819402,23.2595131 L12.5108777,23.2950439 L12.4918791,23.2987469 L12.4918791,23.2987469 L12.4767152,23.2950439 L12.4056548,23.2595131 C12.3958229,23.2563662 12.3870493,23.2590235 12.3821421,23.2649074 L12.3780323,23.275831 L12.360941,23.7031097 L12.3658947,23.7234994 L12.3769048,23.7357139 L12.4804777,23.8096931 L12.4953491,23.8136134 L12.4953491,23.8136134 L12.5071152,23.8096931 L12.6106902,23.7357139 L12.6232938,23.7196733 L12.6232938,23.7196733 L12.6266527,23.7031097 L12.609561,23.275831 C12.6075724,23.2657013 12.6010112,23.2592993 12.5934901,23.257841 L12.5934901,23.257841 Z M12.8583906,23.1452862 L12.8445485,23.1473072 L12.6598443,23.2396597 L12.6498822,23.2499052 L12.6498822,23.2499052 L12.6471943,23.2611114 L12.6650943,23.6906389 L12.6699349,23.7034178 L12.6699349,23.7034178 L12.678386,23.7104931 L12.8793402,23.8032389 C12.8914285,23.8068999 12.9022333,23.8029875 12.9078286,23.7952264 L12.9118235,23.7811639 L12.8776777,23.1665331 C12.8752882,23.1545897 12.8674102,23.1470016 12.8583906,23.1452862 L12.8583906,23.1452862 Z M12.1430473,23.1473072 C12.1332178,23.1423925 12.1221763,23.1452606 12.1156365,23.1525954 L12.1099173,23.1665331 L12.0757714,23.7811639 C12.0751323,23.7926639 12.0828099,23.8018602 12.0926481,23.8045676 L12.108256,23.8032389 L12.3092106,23.7104931 L12.3186497,23.7024347 L12.3186497,23.7024347 L12.3225043,23.6906389 L12.340401,23.2611114 L12.337245,23.2485176 L12.337245,23.2485176 L12.3277531,23.2396597 L12.1430473,23.1473072 Z"
                  id="MingCute"
                  fill-rule="nonzero"
                ></path>
                <path
                  d="M3,12 C3,11.4477 3.44772,11 4,11 L20,11 C20.5523,11 21,11.4477 21,12 C21,12.5523 20.5523,13 20,13 L4,13 C3.44772,13 3,12.5523 3,12 Z"
                  id="路径"
                  fill="#ccc"
                ></path>
              </g>
            </g>
          </g>
        </g>
      </svg>

      <svg
        fill="#ccc"
        height="18px"
        width="18px"
        version="1.1"
        id="Layer_1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 460.893 460.893"
        xml:space="preserve"
      >
        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
        <g
          id="SVGRepo_tracerCarrier"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <g>
            <g>
              <g>
                <path
                  d="M420.84,0H160.051c-18.121,0-32.864,14.743-32.864,32.865v76.136c9.398,0,296.519-0.163,296.519-0.163v184.815 c0,1.58-1.285,2.865-2.865,2.865h-57.135v30h57.135c18.122,0,32.865-14.743,32.865-32.865V32.865 C453.705,14.743,438.962,0,420.84,0z M157.186,78.838V32.865c0-1.58,1.285-2.865,2.864-2.865h260.789 c1.58,0,2.865,1.285,2.865,2.865v45.973H157.186z"
                ></path>
                <circle cx="183.835" cy="56.556" r="18.1"></circle>
                <path
                  d="M300.84,134.375c-8.756,0-252.622,0-260.789,0c-18.109,0-32.864,14.717-32.864,32.864v260.789 c0,18.12,14.742,32.865,32.864,32.865H300.84c18.118,0,32.865-14.739,32.865-32.865V167.239 C333.705,149.098,318.952,134.375,300.84,134.375z M37.186,167.239c0-1.579,1.285-2.864,2.864-2.864h260.789 c1.58,0,2.865,1.285,2.865,2.864v45.974H37.186V167.239z M303.706,428.028h-0.001c0,1.58-1.285,2.865-2.865,2.865H40.051 c-1.579,0-2.864-1.285-2.864-2.865V243.213h266.519V428.028z"
                ></path>
                <circle cx="64.835" cy="188.931" r="18.1"></circle>
              </g>
            </g>
          </g>
        </g>
      </svg>
      <svg
        width="18px"
        height="18px"
        viewBox="-0.5 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
        <g
          id="SVGRepo_tracerCarrier"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <path
            d="M3 21.32L21 3.32001"
            stroke="#ccc"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M3 3.32001L21 21.32"
            stroke="#ccc"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
        </g>
      </svg>
    </div>
  </div>
  <div class="url-bar-container">
    <p class="url-bar"></p>
  </div>
  <div class="content-container">
    <p class="content">
      Create a landing page <span class="cursor">|</span>
      <svg
        class="send-btn"
        width="16px"
        height="16px"
        viewBox="0 0 32.00 32.00"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="#bbb"
      >
        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
        <g
          id="SVGRepo_tracerCarrier"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke="#CCCCCC"
          stroke-width="0.32"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <title>arrow-up-circle</title>
          <desc>Created with Sketch Beta.</desc>
          <defs></defs>
          <g
            id="Page-1"
            stroke="none"
            stroke-width="1"
            fill="none"
            fill-rule="evenodd"
          >
            <g
              id="Icon-Set-Filled"
              transform="translate(-362.000000, -1089.000000)"
              fill="#bbb"
            >
              <path
                d="M384.535,1105.54 C384.145,1105.93 383.512,1105.93 383.121,1105.54 L379,1101.41 L379,1112 C379,1112.55 378.553,1113 378,1113 C377.447,1113 377,1112.55 377,1112 L377,1101.41 L372.879,1105.54 C372.488,1105.93 371.854,1105.93 371.465,1105.54 C371.074,1105.14 371.074,1104.51 371.465,1104.12 L377.121,1098.46 C377.361,1098.22 377.689,1098.15 378,1098.21 C378.311,1098.15 378.639,1098.22 378.879,1098.46 L384.535,1104.12 C384.926,1104.51 384.926,1105.14 384.535,1105.54 L384.535,1105.54 Z M378,1089 C369.163,1089 362,1096.16 362,1105 C362,1113.84 369.163,1121 378,1121 C386.837,1121 394,1113.84 394,1105 C394,1096.16 386.837,1089 378,1089 L378,1089 Z"
                id="arrow-up-circle"
              ></path>
            </g>
          </g>
        </g>
      </svg>
      <svg
        class="attach-btn"
        width="16px"
        height="16px"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        stroke="#bbb"
      >
        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
        <g
          id="SVGRepo_tracerCarrier"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <path
            stroke="#bbb"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 2v3m0 3V5m0 0h3m-3 0h-3"
          ></path>
          <path
            fill="#bbb"
            fill-rule="evenodd"
            d="M13 2H5a3 3 0 0 0-3 3v10.5c0 .086.011.17.032.25A1 1 0 0 0 2 16v3a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-7a1 1 0 0 0-.032-.25A1 1 0 0 0 22 11.5V11h-2v.016c-4.297.139-7.4 1.174-9.58 2.623.826.293 1.75.71 2.656 1.256 1.399.84 2.821 2.02 3.778 3.583a1 1 0 1 1-1.706 1.044c-.736-1.203-1.878-2.178-3.102-2.913-1.222-.734-2.465-1.192-3.327-1.392a15.466 15.466 0 0 0-3.703-.386h-.022c-.348.005-.68.02-.994.045V5a1 1 0 0 1 1-1h8V2zM8.5 6a2.68 2.68 0 0 0-1.522.488C6.408 6.898 6 7.574 6 8.5c0 .926.408 1.601.978 2.011A2.674 2.674 0 0 0 8.5 11c.41 0 1.003-.115 1.522-.489.57-.41.978-1.085.978-2.011 0-.926-.408-1.601-.978-2.012A2.674 2.674 0 0 0 8.5 6z"
            clip-rule="evenodd"
          ></path>
        </g>
      </svg>

      <svg
        class="private-btn"
        version="1.0"
        id="Layer_1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="16px"
        height="16px"
        viewBox="0 0 64 64"
        xml:space="preserve"
        fill="#bbb"
      >
        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
        <g
          id="SVGRepo_tracerCarrier"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <path
            fill="#bbb"
            d="M52,24h-4v-8c0-8.836-7.164-16-16-16S16,7.164,16,16v8h-4c-2.211,0-4,1.789-4,4v32c0,2.211,1.789,4,4,4h40 c2.211,0,4-1.789,4-4V28C56,25.789,54.211,24,52,24z M32,48c-2.211,0-4-1.789-4-4s1.789-4,4-4s4,1.789,4,4S34.211,48,32,48z M40,24 H24v-8c0-4.418,3.582-8,8-8s8,3.582,8,8V24z"
          ></path>
        </g>
      </svg>
    </p>
  </div>
</div>