component.jsx

import { Wrapper, Content, Box, Title, List, Item } from "./styles";

const component = () => (
  <Wrapper>
    <Content>
      <Box>
        <Title>Clothes</Title>
        <List>
          <Item>Dresses</Item>
          <Item>T-shirts</Item>
          <Item>Skirts</Item>
          <Item>Tops</Item>
          <Item>Jeans</Item>
          <Item>Jackets</Item>
          <Item>Trousers</Item>
          <Item>Coat</Item>
          <Item>Lingerie</Item>
          <Item>Costumes</Item>
          <Item>Shorts</Item>
          <Item>Shirts</Item>
          <Item>Knitwear</Item>
        </List>
      </Box>
      <Box>
        <Title>Shoes</Title>
        <List>
          <Item>Shoes</Item>
          <Item>Wellingtons</Item>
          <Item>Ankle Boots</Item>
          <Item>Boots</Item>
          <Item>Sneakers</Item>
          <Item>Loafers</Item>
          <Item>Sneakers</Item>
          <Item>Ballet flat</Item>
          <Item>Beach shoes</Item>
        </List>
      </Box>
      <Box>
        <Title>Bags</Title>
        <List>
          <Item>Strapping</Item>
          <Item>Glasses</Item>
          <Item>Gloves</Item>
          <Item>Hat</Item>
          <Item>Scarfs</Item>
          <Item>Accessories for phones and tablets arr dwe</Item>
          <Item>Purses</Item>
        </List>
      </Box>
    </Content>
  </Wrapper>
);

export default component;

styles.js

import styled from "styled-components";

export const Wrapper = styled.div`
  background-color: #fff;
  position: absolute;
  width: 100%;
`;

export const Content = styled.div`
  max-width: 68%;
  margin: 0 auto;
  padding: 30px 0;
  display: flex;
  justify-content: space-between;
`;

export const Box = styled.div`
  flex-basis: 26%;
`;

export const Title = styled.h4`
  color: #aa6f51;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.9em;
`;

export const List = styled.ul`
  height: 200px;
  padding-top: 30px;
  display: flex;
  flex-flow: column wrap;
  margin: -6px;
`;

export const Item = styled.li`
  font-weight: 300;
  font-size: 0.92em;
  margin: 6px;
  white-space: wrap;
  cursor: pointer;
  &:hover {
    color: #f85d4b;
  }
`;