请用tailwindcss写出html代码，包含综合排序，距离最近，销量最高，筛选，其中综合排序和筛选据备筛选功能

以下是使用 Tailwind CSS 编写的基本 HTML 代码，包含综合排序、距离最近、销量最高、筛选等功能：

<div class="flex justify-between items-center bg-gray-200 p-4">
  <div class="flex items-center space-x-4">
    <button class="px-2 py-1 bg-white rounded-md shadow-md text-gray-700 font-medium hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500">综合排序</button>
    <button class="px-2 py-1 bg-white rounded-md shadow-md text-gray-700 font-medium hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500">距离最近</button>
    <button class="px-2 py-1 bg-white rounded-md shadow-md text-gray-700 font-medium hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500">销量最高</button>
  </div>
  <div class="flex items-center space-x-4">
    <button class="px-2 py-1 bg-white rounded-md shadow-md text-gray-700 font-medium hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500">筛选</button>
    <div class="relative">
      <button class="px-2 py-1 bg-white rounded-md shadow-md text-gray-700 font-medium hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500">
        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
      </button>
      <div class="absolute right-0 top-8 bg-white rounded-md shadow-md py-2 px-4">
        <ul class="space-y-2">
          <li><a href="#" class="block px-2 py-1 hover:bg-gray-100 rounded-md">选项1</a></li>
          <li><a href="#" class="block px-2 py-1 hover:bg-gray-100 rounded-md">选项2</a></li>
          <li><a href="#" class="block px-2 py-1 hover:bg-gray-100 rounded-md">选项3</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

这段 HTML 代码使用了 Tailwind CSS 提供的一些常用类，如 `flex` 用于实现弹性盒子布局，`justify-between` 和 `items-center` 用于水平居中和垂直居中，`bg-gray-200` 用于设置背景色，`p-4` 用于设置内边距，`rounded-md` 用于设置圆角等。

其中，综合排序、距离最近、销量最高三个按钮使用了相同的样式，使用了 `px-2` 和 `py-1` 设置内边距，`bg-white` 设置背景色，`rounded-md` 设置圆角，`shadow-md` 设置阴影，`text-gray-700` 设置文本颜色，`font-medium` 设置字体粗细，`hover:bg-gray-100` 设置鼠标悬停时的背景色，`focus:outline-none` 和 `focus:ring-2`、`focus:ring-gray-500` 设置聚焦时的样式。

筛选按钮和下拉框使用了相同的样式，按钮中使用了 SVG 图标，使用了 `relative` 和 `absolute` 实现定位，下拉框使用了 `bg-white`、`rounded-md`、`shadow-md`、`py-2` 和 `px-4` 设置样式，使用了 `space-y-2` 设置垂直间距，`block` 设置元素为块级元素，`hover:bg-gray-100` 设置鼠标悬停时的背景色，`rounded-md` 设置圆角等。