How to put content center vertically and horizontally with tailwind.css in React, Next.js?

Issue

I am trying to put an svg component at the center of a parent div element vertically and horizontally using tailwind.css in a React, Next.js project. Please let me know where is wrong of my code bellow.

For the current result shown in the pasted png bellow, the svg icon isn't at the center of its parent div element. In addition, the parent div does not have the same height as the sibling div elements of the row. I want to fix these two problems. The second pasted png shows the new better result after I followed Mr.Juliomalves's answer.

//index.js

import { RedToBlueCols } from "../components/cols";

export default function Home() {
  return (
    <RedToBlueCols width="120" height="60">
      <div>
        <p>red</p>
        <p>red</p>
        <p>red</p>
        <p>red</p>
        <p>red</p>
      </div>
      <div>
        <p>blue</p>
        <p>blue</p>
        <p>blue</p>
        <p>blue</p>
        <p>blue</p>
      </div>
    </RedToBlueCols>
  );
}

//cols.js

import { RedToBlue } from "./mysvg";

export function RedToBlueCols(props) {
  return (
    <div className="w-screen flex flex-wrap flex-row ">
      <div className="w-2/12 "></div>
      <div className="w-3/12 border-4">{props.children[0]}</div>
      <div className="w-2/12 border-4 content-center h-full ">
        <RedToBlue width="120" height="48"></RedToBlue>
      </div>
      <div className="w-3/12 border-4">{props.children[1]}</div>
      <div className="w-2/12"></div>
    </div>
  );
}

//mysvg.js

import styles from "../styles/svg.module.css";
export function RedToBlue(props) {
  const { height, width } = props;
  return (
    <span class={styles["svg-char"]}>
      <svg
        width={width}
        height={height}
        viewBox="0 0 30 6"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
      >
        <title>RedToBlue</title>
        <defs>
          <linearGradient
            id="gradRtoB"
            x1="0"
            y1="6"
            x2="30"
            y2="6"
            gradientUnits="userSpaceOnUse"
            spreadMethod="repeat"
          >
            <stop offset="30%" stopColor="#ff0000" stopOpacity="1" />
            <stop offset="50%" stopColor="#ffff00" stopOpacity="1" />
            <stop offset="70%" stopColor="#0000ff" stopOpacity="1" />
          </linearGradient>
        </defs>
        <g fill="white">
          <path
            d="M0,0 l 5,3 l -5,3 h 25 l 5,-3 l -5,-3 z"
            fill="url(#gradRtoB)"
          />
        </g>
      </svg>
    </span>
  );
}

//svg.module.css

.svg-char {
   display: inline-block; 
   @apply border-2;
}

Solution

To center all children horizontally you could add place-items-center on your top most <div>, then to center the SVG within its parent container simply apply flex and place-content-center to the container.

<div className="w-screen flex flex-wrap flex-row place-items-center">
    <!-- -->
    <div className="flex place-content-center w-2/12 border-4 h-full"><!-- SVG container -->
        <!-- -->
    </div>
    <!-- -->
</div>

Answered By - juliomalves