How to create the curve/ or a bend in a line with tailwindCss

Question

How could I create the bend in a line with Tailwind CSS classes, as you can see I the picture there's a line under the green circle/dot. explicitly not using CSS stylesheet? or is it better to create an svg and simply use it?

This is my current code now, Any support would be really helpful.

 <div className="flex items-center justify-between gap-x-6 py-2.5 px-2.5 sm:pr-3.5 lg:pl-3 hover:bg-gray-100 border-l-4 hover:border-green-400 cursor-pointer rounded-sm">
      <a href="#">
        {/* <strong className="font-semibold"> hhh</strong> */}
        <div className="flex justify-between gap-x-3">
          {/* circle */}
          <div className="flex h-5 w-5 rounded-full bg-green-200 items-center justify-center">
            <svg
              viewBox="0 0 2 2"
              className="inline h-2 w-2 fill-current rounded-full text-green-500"
              aria-hidden="true"
            >
              <circle cx={1} cy={1} r={3} />
            </svg>
          </div>
          <p className="text-black text-md font-medium items-center justify-center">
            mdsvx in sveltekit&nbsp;
          </p>
        </div>

        {/* <span aria-hidden="true">&rarr;</span> */}
      </a>

      <div className="-m-3 flex gap-3 p-3 focus-visible:outline-offset-[-4px]">
        <div className="flex-none leading-none tracking-normal text-sm font-normal text-gray-600 border border-gray-400 bg-transparent px-3 py-2 rounded-full">
          #mdsvx
        </div>
        <div className="flex-none leading-none text-sm tracking-normal font-normal text-gray-600 border border-gray-400 bg-transparent px-3 py-2 rounded-full">
          #svelte-kit
        </div>
        {/* <XMarkIcon className="h-5 w-5 text-black" aria-hidden="true" /> */}
      </div>
    </div>

Answer 1

How about using a div with a border left and bottom and applying a border radius to the bottom left corner?

In tailwind, something like this https://play.tailwindcss.com/W8XLs2pqB1.

<div class="h-7 w-4 rounded-bl-lg border-l-2 border-b-2"></div>

Putting everything together, it could look like this https://play.tailwindcss.com/cD7U8CZwZJ.

<div class="p-4">
  <div>
    <div class="flex items-center gap-2">
      <div class="h-5 w-5 rounded-full bg-gray-200"></div>
      <div class="text-sm">mdsvx in svelte kit</div>
    </div>
    <!-- This is the element with a curved line. Adjust the height to adjust space between title. -->
    <div class="-mb-3 ml-2.5 mt-1.5 h-7 w-4 rounded-bl-lg border-l-2 border-b-2"></div>
  </div>
  <ul class="ml-8 space-y-2">
    <li class="flex items-center gap-2">
      <div class="h-5 w-5 rounded bg-gray-200"></div>
      <span class="text-sm">Item</span>
    </li>
    <li class="flex items-center gap-2">
      <div class="h-5 w-5 rounded bg-gray-200"></div>
      <span class="text-sm">Item</span>
    </li>
    <li class="flex items-center gap-2">
      <div class="h-5 w-5 rounded bg-gray-200"></div>
      <span class="text-sm">Item</span>
    </li>
  </ul>
</div>