Adjust the SVG Path to achieve required design in my react app using tailwind CSS

Question

Here is my running code so far:

// DiscoveryResponse.jsx

import { useState } from 'react';
import Heading from '../Heading/Heading';
import DiscoveryButton from '../DiscoveryButton/DiscoveryButton';
import { responses } from './discoveryResponses'; // Adjust path as necessary
import { buttonNames } from '../DiscoveryButton/buttonNames';
import './DiscoveryResponse.css'

const DiscoveryResponse = () => {
  const [activeResponse, setActiveResponse] = useState(0);

  const handleButtonClick = (index) => {
    setActiveResponse(index);
  };

  return (
    <section className="py-12 px-4 md:px-40">
      <div className="text-center pt-4 pb-8">
        <Heading title="Discovery Response Generator (Discovery Workflow)" titleFirst={true} />
      </div>

{/*PARENT FOR GRIDS  */}
      <div className="grid grid-cols-1 md:grid-cols-[30%_35%_35%] py-10 gap-10">
        {/* Left Side (Image Display) */}
        <div className="hidden md:block">
          <img
            src={responses[activeResponse].image}
            alt="Feature"
            className="w-full h-auto border-2 border-l-0 border-black p-0 m-0"
          />
        </div>

        {/* Center (Text Display) */}
        <div className="flex items-center justify-center border-2 border-gray-200 rounded-2xl">
          <div className="overflow-auto" style={{ maxHeight: '400px' }}>
            <h1 className="text-lg p-4">{buttonNames[activeResponse]}</h1>
            <p className="text-lg p-4">{responses[activeResponse].text}</p>
          </div>
        </div>


        {/* RIGHT SIDE PLAY WITH */}
<div className="grid grid-cols-[80%_20%] relative">
  {/* Button Grid */}
  <div className="grid grid-cols-1 items-start border-2 space-y-4">
    {responses.map((response, index) => (
      <DiscoveryButton
        key={index}
        index={index}
        active={activeResponse === index}
        onClick={handleButtonClick}
      />
    ))}
  </div>

  {/* Navigation Arrows */}
  <div className="grid grid-cols-1 mt-2 pl-2 border-2 justify-center relative">
    {responses.map((response, index) => (
        // VERTICAL LINE HERE
      <div key={index} className="relative w-full pt-[--pt] bg-[image:linear-gradient(#000,#000),linear-gradient(#000,#000)] bg-[position:0_calc((theme(fontSize.base.1.lineHeight)*.5)-1px+var(--pt)),100%_var(--y,0%)] bg-[length:100%_2px,2px_var(--h,100%)] bg-no-repeat [--pt:theme(padding.4)] first:[--pt:0%] first:[--y:calc(theme(fontSize.base.1.lineHeight)*.5)] last:[--h:calc((theme(fontSize.base.1.lineHeight)*.5)+var(--pt))]">

        {/* Poistioning of Arrow head */}
        <svg className="translate-y-[calc((theme(fontSize.base.1.lineHeight)-24px)*.75)]" width="16.8" height="24" viewBox="0 0 16.8 24" fill="none">

            {/* ARROW HEAD HERE */}
            <path d="M0 12l12 12 1.4-1.4L4.2 12 13.4 3.4 10 0l-12 12z" fill="currentColor"/>        
            </svg>
      </div>
    ))}
  </div>



  
</div>




      </div>

      
    </section>
  );
};

export default DiscoveryResponse;

Just focus on the 3rd element, on the RHS i want the 3rd arrow tail to cross the vertical line, maybe for that I have to adjust the vertical line to the left, but all other arrows should end at the intersection point of it, while the 3rd line should cross the vertical line effectively forming a Plus sign design there.

Answer 1

You could add an extra element in the third iteration that draws the arrows:

{index === 2 && (
  <div class="absolute left-full top-[--pt] h-[2px] bg-black w-5 mt-[11px]" />
)}

const { useState } = React;

const Heading = () => 'Heading';
const DiscoveryButton = ({ index, onClick }) => {
  return <button onClick={() => onClick(index)}>DiscoveryButton</button>;
};

const responses = [
  {
    image: 'https://picsum.photos/300/300',
    text: 'Foo 1',
  },
  {
    image: 'https://picsum.photos/300/300?',
    text: 'Foo 2',
  },
  {
    image: 'https://picsum.photos/300/300?0',
    text: 'Foo 3',
  },
  {
    image: 'https://picsum.photos/300/300?1',
    text: 'Foo 4',
  },
  {
    image: 'https://picsum.photos/300/300?1',
    text: 'Foo 5',
  },
];

const buttonNames = Array(5).fill('Foo');

const DiscoveryResponse = () => {
  const [activeResponse, setActiveResponse] = useState(0);

  const handleButtonClick = (index) => {
    setActiveResponse(index);
  };

  return (
    <section className="py-12 px-4 md:px-40">
      <div className="text-center pt-4 pb-8">
        <Heading
          title="Discovery Response Generator (Discovery Workflow)"
          titleFirst={true}
        />
      </div>

      {/*PARENT FOR GRIDS  */}
      <div className="grid grid-cols-1 md:grid-cols-[30%_35%_35%] py-10 gap-10">
        {/* Left Side (Image Display) */}
        <div className="hidden md:block">
          <img
            src={responses[activeResponse].image}
            alt="Feature"
            className="w-full h-auto border-2 border-l-0 border-black p-0 m-0"
          />
        </div>

        {/* Center (Text Display) */}
        <div className="flex items-center justify-center border-2 border-gray-200 rounded-2xl">
          <div className="overflow-auto" style={{ maxHeight: '400px' }}>
            <h1 className="text-lg p-4">{buttonNames[activeResponse]}</h1>
            <p className="text-lg p-4">{responses[activeResponse].text}</p>
          </div>
        </div>

        {/* RIGHT SIDE PLAY WITH */}
        <div className="grid grid-cols-[80%_20%] relative">
          {/* Button Grid */}
          <div className="grid grid-cols-1 items-start border-2 space-y-4">
            {responses.map((response, index) => (
              <DiscoveryButton
                key={index}
                index={index}
                active={activeResponse === index}
                onClick={handleButtonClick}
              />
            ))}
          </div>

          {/* Navigation Arrows */}
          <div className="grid grid-cols-1 mt-2 pl-2 border-2 justify-center relative">
            {responses.map((response, index) => (
              // VERTICAL LINE HERE
              <div
                key={index}
                className="relative w-full pt-[--pt] bg-[image:linear-gradient(#000,#000),linear-gradient(#000,#000)] bg-[position:0_calc((theme(fontSize.base.1.lineHeight)*.5)-1px+var(--pt)),100%_var(--y,0%)] bg-[length:100%_2px,2px_var(--h,100%)] bg-no-repeat [--pt:theme(padding.4)] first:[--pt:0%] first:[--y:calc(theme(fontSize.base.1.lineHeight)*.5)] last:[--h:calc((theme(fontSize.base.1.lineHeight)*.5)+var(--pt))]"
              >
                {/* Poistioning of Arrow head */}
                <svg
                  className="translate-y-[calc((theme(fontSize.base.1.lineHeight)-24px)*.75)]"
                  width="16.8"
                  height="24"
                  viewBox="0 0 16.8 24"
                  fill="none"
                >
                  {/* ARROW HEAD HERE */}
                  <path
                    d="M0 12l12 12 1.4-1.4L4.2 12 13.4 3.4 10 0l-12 12z"
                    fill="currentColor"
                  />
                </svg>
                {index === 2 && (
                  <div class="absolute left-full top-[--pt] h-[2px] bg-black w-5 mt-[11px]" />
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

ReactDOM.createRoot(document.getElementById('app')).render(
  <DiscoveryResponse />
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.4"></script>

<div id="app"></div>